資訊專欄INFORMATION COLUMN
摘要：我們將引入我們配置的中，再將修改如下路徑你們改下將印射為接口域名如果是接口，需要配置這個參數是否跨域需要的之后不管是生產環(huán)境，還是開發(fā)環(huán)境，都不用再修改我們的請求地址了。
前言
我們在使用vue-cli啟動項目的時候npm run dev便可以啟動我們的項目了，通常我們的請求地址是以localhost:8080來請求接口數據的，localhost是沒有辦法設置cookie的。
我們可以在vue-cli配置文件里面設置一個代理，跨域的方法有很多，通常需要后臺來進行配置。我們可以直接通過node.js代理服務器來實現跨域請求。
vue proxyTable接口跨域請求調試在vue-cli項目中的config文件夾下的index.js配置文件中，dev長這樣子：
dev: {
env: require("./dev.env"),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {},
cssSourceMap: false
}
服務器提供的接口如果長這樣https://www.exaple.com/server_new/login，我們把域名提取出來如https://www.exaple.com；
在config中新建一個文件命名為proxyConfig.js :
module.exports = {
proxy: {
"/apis": { //將www.exaple.com印射為/apis
target: "https://www.exaple.com", // 接口域名
secure: false, // 如果是https接口，需要配置這個參數
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
}
重啟項目npm run dev：
你會發(fā)現出現了這個
這個時候我們已經設置好了本地API代理了
修改本地hosts文件window文件路徑一般是C:WindowSystem32driversetc，mac則直接前往文件夾/etc/hosts，打開hosts文件，在這一段下面把localhost設置進去
# 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搞定
此時我們已經完全解決了跨域問題，以及本地測試后臺無法向我們本地環(huán)境設置cookie的情況了。
補充這個文章發(fā)布很久了，很多人私信我問我開發(fā)地址是什么，上線地址是什么。
在這里進行一下補充，教大家一個一勞永逸的方法；
寫一個config.js文件，作為項目地址的配置。
如下：
//項目域名地址
const url = "https://exaple.com";
let ROOT;
//由于封裝的axios請求中，會將ROOT打包進去，為了方便之后不再更改，判斷了當前環(huán)境，而生成的不同的ROOT
if (process.env.NODE_ENV === "development") {
//開發(fā)環(huán)境下的代理地址，解決本地跨域跨域，配置在config目錄下的index.js dev.proxyTable中
ROOT = "/apis"
} else {
//生產環(huán)境下的地址
ROOT = url;
}
exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;
這里暴露出去了兩個接口，一個作為代理指向地址，也就是真正的請求地址，一個則為我們的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接口，需要配置這個參數
changeOrigin: true, //是否跨域
pathRewrite: {
[`^${config.ROOT}`]: "" //需要rewrite的
}
}
}
}
之后不管是生產環(huán)境，還是開發(fā)環(huán)境，都不用再修改我們的請求地址了。
寫的比較潦草，沒有整理思路，總結一下。
也就是說，之前我們的方法，在npm run dev的時候，ajax請求接口地址需要帶上/apis，而如果我們在npm run build的時候，則需要將ajax接口地址改為真正的地址www.exaple.com，這樣極其不方便，每次都要改。那我們便通過process.env.NODE_ENV來判斷環(huán)境，從而導出不一樣的接口。
好了，如果有小伙伴不太清楚的，私信我我重新整理一下當前教程，如果都能看懂我補充的，就不改啦哈哈
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/85227.html
摘要：由兩部分組成回調函數和數據?；卣{函數是當響應到來時應該在頁面中調用的函數?；卣{函數的名字一般是在請求中指定的。動態(tài)創(chuàng)建標簽，設置其，回調函數在中設置在頁面中，返回的作為參數傳入回調函數中，我們通過回調函數來來操作數據。 什么是跨域？ 同源策略規(guī)定了如果兩個 url 的協議、域名、端口中有任何一個不等，就認定它們跨源了。 跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...
摘要：由兩部分組成回調函數和數據?；卣{函數是當響應到來時應該在頁面中調用的函數?；卣{函數的名字一般是在請求中指定的。動態(tài)創(chuàng)建標簽，設置其，回調函數在中設置在頁面中，返回的作為參數傳入回調函數中，我們通過回調函數來來操作數據。 什么是跨域？ 同源策略規(guī)定了如果兩個 url 的協議、域名、端口中有任何一個不等，就認定它們跨源了。 跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...
摘要：跨域總結跨域思路跨域解決方案一般分為兩種前端解決，后端解決前端解決方案通過前端解決的思想就是，通過設置中間件把跨域的請求轉發(fā)一下，其實就是反向代理，比如想要訪問豆瓣的接口很，但是如果請求的是就不存在跨域反向代理就是截取之后重寫請求將請求轉發(fā) 跨域總結 1.跨域思路 跨域解決方案一般分為兩種：前端解決，后端解決 1.1 前端解決方案 通過前端解決的思想就是，通過設置中間件把跨域的請求轉發(fā)...
摘要：本文將針對使用生態(tài)開發(fā)完成的網站，以版本為基礎兼容目標，實現全功能正常使用的全面兼容解決方案。這樣做的目的，是逐步減少全局性方法，使得語言逐步模塊化。此外，使用這個，一旦頁面不處于瀏覽器的當前標簽，就會自動停止刷新。 前言 背景情況 vue - 2.5.11 vue-cli 使用模板 webpack-simple http請求：axios Vue 官方對于 ie 瀏覽器版本兼容情...
閱讀 3067·2021-10-12 10:17
閱讀 1671·2021-09-01 11:38
閱讀 1178·2019-08-30 15:44
閱讀 3553·2019-08-26 18:36
閱讀 572·2019-08-26 13:25
閱讀 1957·2019-08-26 10:29
閱讀 2906·2019-08-23 15:58
閱讀 819·2019-08-23 12:59
