vue-cli本地環(huán)境API代理設(shè)置和解決跨域

lakeside 發(fā)布于2019-08-20 19:09 / 3485人閱讀

摘要：我們將引入我們配置的中，再將修改如下路徑你們改下將印射為接口域名如果是接口，需要配置這個(gè)參數(shù)是否跨域需要的之后不管是生產(chǎn)環(huán)境，還是開發(fā)環(huán)境，都不用再修改我們的請求地址了。

前言

我們在使用vue-cli啟動(dòng)項(xiàng)目的時(shí)候npm run dev便可以啟動(dòng)我們的項(xiàng)目了，通常我們的請求地址是以localhost:8080來請求接口數(shù)據(jù)的，localhost是沒有辦法設(shè)置cookie的。

我們可以在vue-cli配置文件里面設(shè)置一個(gè)代理，跨域的方法有很多，通常需要后臺(tái)來進(jìn)行配置。我們可以直接通過node.js代理服務(wù)器來實(shí)現(xiàn)跨域請求。

vue proxyTable接口跨域請求調(diào)試

在vue-cli項(xiàng)目中的config文件夾下的index.js配置文件中，dev長這樣子：

dev: {
    env: require("./dev.env"),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {},   
    cssSourceMap: false
  }

服務(wù)器提供的接口如果長這樣https://www.exaple.com/server_new/login，我們把域名提取出來如https://www.exaple.com；

在config中新建一個(gè)文件命名為proxyConfig.js :

module.exports = {
  proxy: {
        "/apis": {    //將www.exaple.com印射為/apis
            target: "https://www.exaple.com",  // 接口域名
            secure: false,  // 如果是https接口，需要配置這個(gè)參數(shù)
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                "^/apis": ""   //需要rewrite的,
            }              
        }
  }
}

如果本身的接口地址就有 "/api" 這種通用前綴，也就是說https://www.exaple.com/api，就可以把 pathRewrite 刪掉。

config文件夾下的index.js引入proxyConfig.js：

var proxyConfig = require("./proxyConfig")

config文件夾下的index.js中的dev改成:

dev: {
    env: require("./dev.env"),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: proxyConfig.proxy,
    cssSourceMap: false
  }

重啟項(xiàng)目npm run dev：

你會(huì)發(fā)現(xiàn)出現(xiàn)了這個(gè)

這個(gè)時(shí)候我們已經(jīng)設(shè)置好了本地API代理了

修改本地hosts文件

window文件路徑一般是C:WindowSystem32driversetc，mac則直接前往文件夾/etc/hosts，打開hosts文件，在這一段下面把localhost設(shè)置進(jìn)去

# localhost name resolution is handled within DNS itself.
# 127.0.0.1       localhost
# ::1             localhost
127.0.0.1                   activate.adobe.com
127.0.0.1                   practivate.adobe.com
127.0.0.1                   lmlicenses.wip4.adobe.com
127.0.0.1                   lm.licenses.adobe.com
127.0.0.1                   na1r.services.adobe.com
127.0.0.1                   hlrcv.stage.adobe.com

localhost                   www.exaple.com

搞定

此時(shí)我們已經(jīng)完全解決了跨域問題，以及本地測試后臺(tái)無法向我們本地環(huán)境設(shè)置cookie的情況了。

補(bǔ)充

這個(gè)文章發(fā)布很久了，很多人私信我問我開發(fā)地址是什么，上線地址是什么。

在這里進(jìn)行一下補(bǔ)充，教大家一個(gè)一勞永逸的方法；

寫一個(gè)config.js文件，作為項(xiàng)目地址的配置。

如下：

//項(xiàng)目域名地址
const url = "https://exaple.com";


let ROOT;
//由于封裝的axios請求中，會(huì)將ROOT打包進(jìn)去，為了方便之后不再更改，判斷了當(dāng)前環(huán)境，而生成的不同的ROOT
if (process.env.NODE_ENV === "development") {
    //開發(fā)環(huán)境下的代理地址，解決本地跨域跨域，配置在config目錄下的index.js dev.proxyTable中
    ROOT = "/apis"
} else {
    //生產(chǎn)環(huán)境下的地址
    ROOT = url;
}

exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;

這里暴露出去了兩個(gè)接口，一個(gè)作為代理指向地址，也就是真正的請求地址，一個(gè)則為我們的ajax請求的地址。

我們將ROOT引入我們配置的ajax中，再將proxyConfig.js修改如下：

const config = require("../src/fetch/config");  //路徑你們改下
module.exports = {
  proxy: {
        [config.ROOT]: {    //將www.exaple.com印射為/apis
            target: config.PROXYROOT,,  // 接口域名
            secure: false,  // 如果是https接口，需要配置這個(gè)參數(shù)
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                [`^${config.ROOT}`]: ""   //需要rewrite的
            }              
        }
  }
}

之后不管是生產(chǎn)環(huán)境，還是開發(fā)環(huán)境，都不用再修改我們的請求地址了。

寫的比較潦草，沒有整理思路，總結(jié)一下。

也就是說，之前我們的方法，在npm run dev的時(shí)候，ajax請求接口地址需要帶上/apis，而如果我們在npm run build的時(shí)候，則需要將ajax接口地址改為真正的地址www.exaple.com，這樣極其不方便，每次都要改。那我們便通過process.env.NODE_ENV來判斷環(huán)境，從而導(dǎo)出不一樣的接口。

好了，如果有小伙伴不太清楚的，私信我我重新整理一下當(dāng)前教程，如果都能看懂我補(bǔ)充的，就不改啦哈哈