關于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執行，才會生效