咨询电话

0551-64416800

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

2021-08-02 22:47 阅读数:952
什么是跨域

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个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执行,才会生效


 

0.367935s