vue项目的代理跨域

最近在从0开始学习构建vue项目，偶尔记录笔记。

首先我们知道跨域是浏览器为了安全而做出的限制策略，保证浏览器的请求只能遵循同源策略：同域名、同端口、同协议。

常用的解决跨域问题的方法有CORS跨域、JSONP跨域、代理跨域等。其中CORS跨域只需要后端进行修改即可，但后端方面改动会略为麻烦；JSONP跨域的话前后端都需要修改，前端不仅要另外下载jsonp插件，并且不能使用axios来进行请求，后期修改也较为麻烦；如果是代理跨域，只需要前端修改即可，并且前端实现需求的时候十分自由，该方式较之前两种更为方便。现记录一下如何在vue项目中进行代理跨域。

1.首先，在用脚手架创建完的项目根目录下，新建一个vue.config.js的文件，该文件用来配置项目的webpack设置。

2.然后复制下方代码，粘贴进vue.config.js中，然后根据需要进行修改，下面列出了各个字段的说明。

module.exports = {
    devServer:{
        host:"localhost",
        port:8080,
        proxy:{
            '/api':{
                target:'https://www.imooc.com',
                changeOrigin:true,
                pathRewrite:{
                    '/api':''
                }
            }
        }
    }
}

3.接下来说明每个字段的作用

module.exports: 导入模块，因为这是对webpack的配置，所以只能使用commomJS的导入方式。

devServe：node.js启动时会先默认加载这个配置表

host：我们所要访问的主机。（应该是显示在请求里的表面主机域名）

port：配置访问的端口，启动的时候默认是8080，不过也能改成其他端口。

proxy：代理设置。

‘/api’: 代理时需要监听的字段，当监听到有这个字段时，便会启动代理。

target： 实际需要所访问数据的站点，即把监听到上面/api字段的请求的实际主机域名转换为该项所配置的值。

changeOrigin： 是否在请求时需要把某些接口字段修改为其他的值，若该项设为false，那么下一项pathRewrite可以直接不用写了。

pathRewrite：当changeOrigin为true时，需要配置该项；该项是一个对象，如果接口（域名部分相邻的后面）有该对象的键，那么就把接口里等于该键的字段改为该键的值；上面的代码就是把所监听到的“/api”转换为空字符串。