摘要：我们将引入我们配置的中，再将修改如下路径你们改下将印射为接口域名如果是接口，需要配置这个参数是否跨域需要的之后不管是生产环境，还是开发环境，都不用再修改我们的请求地址了。
前言
我们在使用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：
你会发现出现了这个
这个时候我们已经设置好了本地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搞定
此时我们已经完全解决了跨域问题，以及本地测试后台无法向我们本地环境设置cookie的情况了。
补充这个文章发布很久了，很多人私信我问我开发地址是什么，上线地址是什么。
在这里进行一下补充，教大家一个一劳永逸的方法；
写一个config.js文件，作为项目地址的配置。
如下：
//项目域名地址
const url = "https://exaple.com";
let ROOT;
//由于封装的axios请求中，会将ROOT打包进去，为了方便之后不再更改，判断了当前环境，而生成的不同的ROOT
if (process.env.NODE_ENV === "development") {
//开发环境下的代理地址，解决本地跨域跨域，配置在config目录下的index.js dev.proxyTable中
ROOT = "/apis"
} else {
//生产环境下的地址
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的
}
}
}
}
之后不管是生产环境，还是开发环境，都不用再修改我们的请求地址了。
写的比较潦草，没有整理思路，总结一下。
也就是说，之前我们的方法，在npm run dev的时候，ajax请求接口地址需要带上/apis，而如果我们在npm run build的时候，则需要将ajax接口地址改为真正的地址www.exaple.com，这样极其不方便，每次都要改。那我们便通过process.env.NODE_ENV来判断环境，从而导出不一样的接口。
好了，如果有小伙伴不太清楚的，私信我我重新整理一下当前教程，如果都能看懂我补充的，就不改啦哈哈
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85227.html
摘要：由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。动态创建标签，设置其，回调函数在中设置在页面中，返回的作为参数传入回调函数中，我们通过回调函数来来操作数据。 什么是跨域？ 同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。 跨域的解决方式有哪几种？ 1.JSONP 是 JSON with ...
摘要：由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。动态创建标签，设置其，回调函数在中设置在页面中，返回的作为参数传入回调函数中，我们通过回调函数来来操作数据。 什么是跨域？ 同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。 跨域的解决方式有哪几种？ 1.JSONP 是 JSON with ...
摘要：跨域总结跨域思路跨域解决方案一般分为两种前端解决，后端解决前端解决方案通过前端解决的思想就是，通过设置中间件把跨域的请求转发一下，其实就是反向代理，比如想要访问豆瓣的接口很，但是如果请求的是就不存在跨域反向代理就是截取之后重写请求将请求转发 跨域总结 1.跨域思路 跨域解决方案一般分为两种：前端解决，后端解决 1.1 前端解决方案 通过前端解决的思想就是，通过设置中间件把跨域的请求转发...
摘要：本文将针对使用生态开发完成的网站，以版本为基础兼容目标，实现全功能正常使用的全面兼容解决方案。这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。此外，使用这个，一旦页面不处于浏览器的当前标签，就会自动停止刷新。 前言 背景情况 vue - 2.5.11 vue-cli 使用模板 webpack-simple http请求：axios Vue 官方对于 ie 浏览器版本兼容情...
阅读 2984·2021-10-12 10:17
阅读 1588·2021-09-01 11:38
阅读 1080·2019-08-30 15:44
阅读 3478·2019-08-26 18:36
阅读 506·2019-08-26 13:25
阅读 1884·2019-08-26 10:29
阅读 2834·2019-08-23 15:58
阅读 758·2019-08-23 12:59
