Vue打包上线后的跨域问题处理
由于开发环境和生产环境的不同,会导致vue访问出现跨域的问题。一、开发环境跨域问题1.config/index.js文件配置代理,找到proxyTable字段,如下面一样配置dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/xx...
·
由于开发环境和生产环境的不同,会导致vue访问出现跨域的问题。
一、开发环境跨域问题
1.config/index.js文件配置代理,找到proxyTable字段,如下面一样配置
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/xxx': {
target: 'http://xxx/api', //访问的接口1
changeOrigin: true,
pathRewrite: {
'^/xxx': '/'
}
},
'/yyy': {
target: 'http://yyy/api', //访问的接口2
changeOrigin: true,
pathRewrite: {
'^/yyy': '/'
}
},
},
配置好后 访问的url就不用再其他地方带上域名了。这个只适合开发环境使用,因为开发环境的本地服务器,以及做好了代理的功能,无需去多余的操作。
二.生产环境跨域问题
为了不用反复在开发和打包之间切换访问的api域名代码。可以入下配置
找到config/prod.env.js。 这个config/dev.env.js开发环境的前面已经配置好了可以不用管了
'use strict'
module.exports = {
NODE_ENV: '"production"',
APP_BASE_APP_API:'"http://xxxx"', //项目api地址1 注意里面的双引号
APP_BASE_WWW_API:'"http://yyyy"', //项目api地址2
......
}
import axios from 'axios';
Vue.prototype.axios = axios.create({
headers: {
'content-type': 'application/json'
}
})
Vue.prototype.$post = function (url, data = {}) {
let _url = ''
if (process.env.NODE_ENV === 'development') {//这个是开发环境下
_url = url
} else if (process.env.NODE_ENV === 'production') {//这个是生产环境下
_url = url
if (url.search(/http:\/\//) != -1 || url.search(/https:\/\//) != -1) {//直接全URL访问
_url = url
} else if (url.search(/\/xxx/) != -1) {//定义的开头uri
url = url.replace("xxx", "api"); //如果uri不一样就替换成一样的
_url = process.env.APP_BASE_APP_API + url;
} else {
_url = url
}
}
return new Promise((resolve, reject) => {
this.axios.post(url, data).then(res => {
resolve(res)
}).catch(function(error) {
reject(error)
})
})
}
以上就完成前端所有的准备工作, 如果只靠前端目前未找到解决的办法,有这方面知识的高手希望留个言
最后后端配置下服务器
Access-Control-Allow-Headers: *
Access-Control-Allow-Origin: *
更多推荐
已为社区贡献1条内容
所有评论(0)