为什么要设置跨域
- 在
web交互的环境中，只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。
想象这样一个场景，如果世界上没有跨域限制，这时假如：
- 支付宝的转账操作是一个
post请求，大概是https://alipay.com/api/withdraw/?to_user=kindJeff&amout=1000 - 我写了一段
ajax的post请求代码，请求连接是上面的url。然后我把这段代码嵌入我的网站a.com
你不久前登陆过支付宝，浏览器里保存了alipay.com域名的cookie - 我让你访问
a.com，打开页面，于是在你不知情的情况下发出了post请求，你的钱就被转到我的账号里了
这就是跨站请求伪造（CSRF）。这是一个非常严重的后果，其利用的就是网站（上例的支付宝）对浏览器的充分信任。所以浏览器一定会设置跨域限制，避免在用户和网站不知情的情况下发出请求。
VUE中如何绕过跨域
我们在实际
vue的开发过程中，都是启动本地的localhost:端口来进行模拟请求服务器的接口，这时候服务器如果设置了跨域，那我们的请求就会被拒绝。
VUE脚手架中设置跨域配置
在
config文件夹下的index.js找到proxyTable这个对象，重写该对象的内容。切记是重写，一定要重写，一定要重写，一定要重写，配置如下参数。
脚手架跨域配置
// 跨域配置
proxyTable: {
'/api': { //此处并非一定和url一致。
target: '服务器地址。比如： https://api.weibo.com/2',
changeOrigin: true, //允许跨域
pathRewrite: {
'^/api': ''
}
}
},
我们可以全局搜索下
proxyTable，其实是在webpack.dev.conf.js的proxy引用了这个对象。也就是说当我们是自己搭建的脚手架，那么直需要在webpack的devServer这个对象下的proxy设置如上的跨域配置，也是可以行的。
配置axios的请求路径
我们只需要将
axios的baseURL设置为api，就能实现跨域。该api字段需要与proxyTable的名称保持一致。比如proxyTable设置的是test，那么这边的baseURL就为test
const request = axios.create({
baseURL: 'api'
})
const params = {
count: 20,
access_token: '微博token'
}
request.get('/statuses/home_timeline.json', { params })
请求结果
VUE3.0下跨域的配置
- 在创建的
vue.config.js加入如下代码
module.exports = {
// 开发环境下服务的配置
devServer: {
hot: true, //自动保存
open: true, // 是否自动打开浏览器
// https: true, // 是否支持https
host: '0.0.0.0',
port: 8080,
// 跨域配置
proxy: {
'/api': { //此处并非一定和url一致。
target: '服务器的url请求地址',
changeOrigin: true, //允许跨域
ws: true,
pathRewrite: {
'^/api': '' // rewrite path
}
}
}
},
}
总结：
-
vue脚手架中找到proxyTable字段，并重写它，设置跨域配置和服务器地址。 - 自己搭建的脚手架，在
webpack下的devServer配置proxy对象，值与上面的一样配置。 - 请求的时候，将请求路径改为设置的名称，比如
api。浏览器中的network地址则会变为http://0.0.0.0:端口/api
网友评论