1. 前端启动一个项目,在项目里访问后台资源可能会跨域;但是在浏览器里直接访问后台资源则不会跨域。
- 相关链接:为啥浏览器直接访问后端地址没有跨域问题
- 个人理解:这些知识虽然复杂,但是也讲理,总不会是无缘无故的。跨域是指浏览器阻止前端网页从一个域名(Origin)向另一个域名的服务器发送请求,获取资源。前端启动项目的时候,本地是有一个域名的,比如http://localhost:80/ ,这时候后端地址是'http://17.11.11.11:8080' ,那么这就构成了跨域了,因为也确实存在两个域。但是从浏览器直接访问后端资源则不存在本地的域,也就不构成跨域了。
2. 如何解决跨域的问题
1. CORS:
这是在后端配置的。注意CORS不能解决iframe嵌套的跨域问题,更进一步地则需要代理解决。
2.代理:
跨域是存在非同源的客户端和服务器端的,但是服务器端和服务器端就没有这个限制啦。所以:
1. 开发环境
vue2项目在vue.config.js中配置,以解决iframe跨域问题为例。 本来页面代码是这样的,这里直接拼接上process.env.VUE_APP_BASE_API设置的地址去访问就会导致跨域问题,即使后端设置了CORS也不行。
vue2
<template>
<i-frame :src="url" />
</template>
<script>
import iFrame from "@/components/iFrame/index";
export default {
name: "Druid",
components: { iFrame },
data() {
return {
url: process.env.VUE_APP_BASE_API + "/druid/login.html"
};
}
};
</script>
但是改一下url为:/api/druid/login.html,即在前面拼上/api。再到里vue.config.js加上proxy代理配置即:
js
'/api': { // 使用相对路径作为代理前缀
target: process.env.VUE_APP_BASE_API, // 使用 VUE_APP_BASE_API 的值
changeOrigin: true,
pathRewrite: {
'^/api': '' // 重写路径,去掉 /api 前缀
}
}
解释一下上面配置的含义:
-
所有以
/api
开头的请求都会被代理。 -
target: process.env.VUE_APP_BASE_API
:- 目标服务器地址由环境变量
VUE_APP_BASE_API
决定。 - 例如,如果
VUE_APP_BASE_API
是http://11.11.11.11:8080
,那么目标服务器地址就是http://11.11.11.11:8080
。
- 目标服务器地址由环境变量
-
changeOrigin: true
:- 改变请求的
host
头为目标服务器的host
。 - 例如,请求的
host
头会从localhost
改为11.11.11.11:8080
。
- 改变请求的
-
pathRewrite: { '^/api': '' }
:- 去掉请求路径中的
/api
前缀。 - 例如,请求
/api/druid/login.html
会被代理到http://11.11.11.11:8080/druid/login.html
。
- 去掉请求路径中的
这样url:/api/druid/login.html就被代理到process.env.VUE_APP_BASE_API + "/druid/login.html"了。访问地址还是一样的,但是此刻已经是代理请求的了。
另外说明一下,这里的代理服务器就是客户端,没有另外的服务器。