vue2的vue.config.js中简单配置代理跨域

调用后端接口访问后台数据，但是因为请求url的协议、域名、端口三者之间任意一个与当前页面url不同产生了跨域，我们vue项目运行的地址一般就是localhost 8080端口，而且后端也没有配置允许跨域（后端如果配置跨域通常是cors），所以前端就要配置跨域，Vue跨域在vue.config.js文件里配置。

代理跨域的解决方法

方法一：

后端大哥来解决，让前端存在跨域问题也可以正常访问接口

方法二:配置代理跨域

在config.js文件中的devServer属性下面的proxy属性

1. devServer: {
2. host: 'localhost',//本地地址
3. port: '8080',//端口号
4. hot: true,//热更新自动刷新
5. open: true,//自动打开
6. overlay: { //当出现编译错误或警告时，在浏览器中显示全屏覆盖。只显示错误信息不提示警告情况限制是
7. warning: false,
8. error: true
9. },
10. proxy: {
11. "/api": {
12. target: 'http://xxxxxxxxxxx.com',//代理地址 凡是使用/api
13. changeOrigin: true,//允许跨域请求
14. secure: false,
15. pathRewrite: { //重写路径 替换请求地址中的指定路径
16. ['^/api']: '/' //将请求地址中的api替换为空
17. }
18. }
19. }
20. }

/api的理解

‘/api’：是指遇到这个字符开头的话，在这个字符前面加上target里面的ip或者域名。

举例：
①登录接口：http://asdfgh:5000/login
…中间省略了配置过程…
②npm run serve:Local: http://localhost:8080/
③点击后发送的登录请求：http://localhost:8080/api/login
④/api 的作用就是将/api前的localhost：8080变成target的内容http://asdfgh:5000/
⑤完整的路径变成了http://asdfgh:5000/api/login
⑥实际接口当中没有这个api，所以pathwrite重写就解决这个问题的。
⑦pathwrite识别到api开头就会把/api重写成空，那就是不存在这个/apil了，完整的路径又变成：http://asdfgh:5000/login

详细可以查看webpack的官方地址:DevServer | webpack