VUE跨域配置

为什么要设置跨域

• 在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

项目github地址