关于vue-cli4.0前端跨域相关的解决办法

什么是跨域

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子：

#协议跨域http://a.baidu.com访问https://a.baidu.com；
#端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80；
#域名跨域
http://a.baidu.com访问http://b.baidu.com；

  现在很多公司都是采用前后分离的方式开发。那么出现经常和会跨域打交道。我这里整理日常开发中解决跨域的几种方案。我们前端使用的Vue，后端使用的php。

解决方案

      在cli3.0之前一直是在config文件下的index.js下面的 proxyTable中添加跨域配置进行跨域的，从cli3.0 开始已经将config等文件夹隐藏，不进行显示了。

所以从cli3.0之后前端想要进行跨域配置的话要进行如下配置：

1. 在根目录下，创建一个vue.config.js文件

2. 在vue.config.js文件中进行配置，代码如下

const webpack = require("webpack");

module.exports = {

  publicPath: "./",

  devServer: {

    proxy: {

      //解决跨域问题

      "/api": {

        // 此处的写法，目的是为了 将 /api 替换成 https://autumnfish.cn/

        target: "http://gggl.phpgzs.top",

        // 允许跨域

        changeOrigin: true,

        // ws: true,

        pathRewrite: {

          "^/api": "/api",

        },

      },

    },

  },

};

3. 配置好后，一定要重启，ctrl+c 结束，在执行npm run serve执行，才会生效