概念
什么是同源策略
同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
所谓同源是指:协议、域名、端口都相同
什么是跨域
跨域就是不同源,就是不满足协议、域名、端口都相同的约定
如:看下面的链接是否与 http://www.test.com/index.html 同源?
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 协议不同(https)
http://www.test.com:90/index.html 不同源 端口不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)
当协议、域名、端口中任意一个不相同时,就是不同源。若不同源之间相互请求资源,就算作跨域
跨域请求devServer代理几种配置
1:先在项目的根目录下新建 vue.config.js 文件
2:在module.exports内设置devServer来处理代理
假设我们要把http://localhost:8081/allin/policy/getProductInfo 中的域名换成 www.test.com 相当于把请求换成 http://www.test.com/allin/policy/getProductInfo
第一种代理方式
不设置 axios 的 baseURL 或者 赋值为空字符串
axios.defaults.baseURL = '';
请求的url地址为 /allin/policy/getProductInfo
axios({
...
url:'/allin/policy/getProductInfo',
...
})
注意
请求的地址必须是包含 /allin ,但一定要注意 axios的baseURL 的配置,baseURL的配置会添加到每一个请求的 url 前面(下面的几种方式也是同样的)
devServer: {
proxy: {
'/allin': {
//要访问的跨域的域名
target: 'http://www.test.com',
ws: true, // 是否启用websockets
secure:false, // 使用的是http协议则设置为false,https协议则设置为true
//开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样客户端端和服务端进行数据的交互就不会有跨域问题
changOrigin: true,
}
}
}
相当于遇见 /allin 才做代理,则会把默认域名http://localhost:8081地址改成 target 对应的http://www.test.com地址,但是在浏览器的F12下,Network->Headers中看到还是http://localhost:8081/allin/policy/getProductInfo, 但是真正的请求的地址则是http://www.test.com/allin/policy/getProductInfo
注意
如果只是修改域名,则不需要写pathRewrite,但如果要写,则必须写成pathRewrite: {’^/allin’: ‘/allin’},相当于把/allin标识还替换成/allin
第二种代理方式
不设置 axios 的 baseURL 或者 赋值为空字符串
axios.defaults.baseURL = '';
请求的url地址为 /allin/getProductInfo
axios({
...
url:'/allin/getProductInfo',
...
})
注意
这里请求时我没有写/polic,目的是在拦截跨域时我在 pathRewrite 上加上
devServer: {
proxy: {
'/allin': {
//要访问的跨域的api的域名
target: 'http://www.test.com',
ws: true,
secure:false, // 使用的是http协议则设置为false,https协议则设置为true
changOrigin: true,
pathRewrite: {
'^/allin': '/allin/policy'
}
}
}
}
相当于请求遇见 /allin 则替换成 /allin/policy,注意/policy后边没有/,这样拼接成功才会是http://www.test.com/allin/policy/getProductInfo
第三种代理方式
不设置 axios 的 baseURL 或者 赋值为空字符串
axios.defaults.baseURL = '';
请求的url地址为 /allin/getProductInfo
axios({
...
url:'/allin/getProductInfo',
...
})
注意
这里请求时我也没有写/polic,目的是在拦截跨域时我在 target 上加上
devServer: {
proxy: {
'/allin': {
//要访问的跨域的api的域名
target: 'http://www.test.com/allin/policy',
ws: true,
secure:false, // 使用的是http协议则设置为false,https协议则设置为true
changOrigin: true,
pathRewrite: {
'^/allin': '/' //必须这样写
}
}
}
}
这里必须要写pathRewrite: { ‘^/allin’: ‘/’},而且里边必须要写成’^/allin’: ‘/’,这里的斜杠代表的意思就是使用target中的/allin/policy,否则就要使用 第二种代理方式 配置,如果不写pathRewrite则请求不会成功。
第四种代理方式(统一代理(推荐))
文章评论