關于vue-cli4.0前端跨域相關的解決辦法

什麼(me)是跨域

  跨域指浏覽器不允許當前頁面(miàn)的所在的源去請求另一個源的數據。源指協議，端口，域名。隻要這(zhè)個3個中有一個不同就是跨域。 這(zhè)裡(lǐ)列舉一個經(jīng)典的列子：

#協議跨域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；

  現在很多公司都(dōu)是采用前後(hòu)分離的方式開(kāi)發(fā)。那麼(me)出現經(jīng)常和會(huì)跨域打交道(dào)。我這(zhè)裡(lǐ)整理日常開(kāi)發(fā)中解決跨域的幾種(zhǒng)方案。我們前端使用的Vue，後(hòu)端使用的php。

解決方案

      在cli3.0之前一直是在config文件下的index.js下面(miàn)的 proxyTable中添加跨域配置進(jìn)行跨域的，從cli3.0 開(kāi)始已經(jīng)將(jiāng)config等文件夾隐藏，不進(jìn)行顯示了。

所以從cli3.0之後(hòu)前端想要進(jìn)行跨域配置的話要進(jìn)行如下配置：

1. 在根目錄下，創建一個vue.config.js文件

2. 在vue.config.js文件中進(jìn)行配置，代碼如下

const webpack = require("webpack");

module.exports = {

  publicPath: "./",

  devServer: {

    proxy: {

      //解決跨域問題

      "/api": {

        // 此處的寫法，目的是爲了 將(jiāng) /api 替換成(chéng) https://autumnfish.cn/

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

        // 允許跨域

        changeOrigin: true,

        // ws: true,

        pathRewrite: {

          "^/api": "/api",

        },

      },

    },

  },

};

3. 配置好(hǎo)後(hòu)，一定要重啓，ctrl+c 結束，在執行npm run serve執行，才會(huì)生效