一如前端深似海，从学习前端至今已有4年之余，但是工作经验只有一年多，这一路遇到了很多坑，我是那种不管做什么都喜欢总结的人，所以每次遇坑都记在笔记上，但是零零散散，但是时间久了需要静下来想把一些坑记录整理出来，作为自己的总结，仅是个人的总结，但是经验还是很缺乏，在技术上还不是很深究的那种，如果总结中有表达不明的或者有更好的结解决方案的可以指出，我很喜欢尝试，更多的是发现并改正，以性能更好的的方案解决问题。但是我想了一下第一遍以解决跨域开头。
在前端开发中调试后台api时经常会遇到跨域问题，从刚开始接触框架来，踩了很多坑，比如我刚用vue时，配置了规则，但是不知道请求url会默认自带这个规则参数（如你配置的规则是/api，url会自带/api这个字段），你发先跨域解决了，但是请求的接口是错的。需要强调的是，每次修改跨域规则proxyTable/proxy，都要重新run才能生效。
vue2.0+中解决跨域问题
1.在config/index.js中dev里添加proxyTable规则：(可添加多个规则，对于不同接口的解决方法)
config/index.js:
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
// 规则只是用 / api 代替 http://10.8.1.180:8080 这个ip
'/api': {
target: 'http://10.8.1.180:8080', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/api': '/api' //路径重写,当你的url带有api字段时如/api/v1/tenant，
//可以将路径重写为与规则一样的名称，即你在开发时省去了再添加api的操作
}
},
'/ucs': {
target: 'http://10.8.0.98', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/ucs': ' ' //路径重写，如果你的url没有/ucs这个字段如http://10.8.0.98/v1/tenant，可以这个设置为空的，
}
}
}
}
}
2.使用
请求api：http://10.8.1.180:8080/api/v1/tenant
http://10.8.0.98/v1/tenant
接口封装文件中或者接口请求中：
二次封装的文件中:
// http://10.8.1.180:8080/api/v1/tenant
export function getStat() {
return request({
url: '/api/v1/tenant',
method: 'get'
})
}
// http://10.8.0.98/v1/tenant
export function getStat() {
return request({
url: '/ucs/v1/tenant',
method: 'get'
})
}
普通接口直接用：
// http://10.8.1.180:8080/api/v1/tenant
axios.get('/api/v1/tenant').then(res => {
consoel.log(res)
}).catch(err => {
console.log(err)
})
// http://10.8.0.98/v1/tenant
axios.get('/ucs/v1/tenant').then(res => {
consoel.log(res)
}).catch(err => {
console.log(err)
})
vue3.0中解决跨域问题
vue-cli 3.0中使用方法个vue2.0+的一样，不用的是文件不一样,规则参数为proxy而不是proxyTable了，vue-cli 3.0是在跟package.json文件同级目录下自己创建一个vue.config.js文件来配置规则
以下为vue.config.js:
// vue.config.js
module.exports = {
// 基本路径
baseUrl: './',
outputDir: 'dist', // 构建输出目录
assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
lintOnSave: true, // 是否开启eslint保存检测，有效值：ture | false | 'error'
devServer: {
open: true,
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: {
// dce url
'/dceAPI': {
target: 'http://192.168.1.8',
ws: true,
changOrigin: true, // 接口跨域
pathRewrite: {
'^/dceAPI': '' //路径重写 ''
}
},
// deploy url
'/api': {
target: 'http://10.8.1.180:8000',
// target: 'http://192.168.1.8',
ws: true,
changOrigin: true, // 接口跨域
pathRewrite: {
'^/api': '/api' //路径重写'/api
}
},
},
before: app => {}
}
}
nuxt 中解决跨域问题
nuxt是在vue2.0的通用应用框架，所以跨域规则跟文章第一点写到的vue2.0+中解决跨域是一致
以上仅是个人经验。经验都是不断积累，后续遇到此类问题后续会继续添加修改。
