跨域是浏览器为了安全而做出的限制策略
同源策略：同域名、同端口、同协议
跨域的三要素：
XMLHttpRequest类型的请求解决方案：
1. CORS 跨域（ 服务器端设置，前端直接调用 => 由后台控制前端的某个站点能否访问 ）
this.axios.get("http://test/foodie-dev-api/index/carousel") .then(res=>{ console.log(res) }) .catch(res=>{ console.log(res) })
2. JSONP 跨域 （ 前端适配，后台配合 => 前后端同时改造 ）
JSONP 可以跨域，但只能用 get 请求
引入 jsonp 后
jsonp(" https://www.jianshu.com/users/recommended?seen_ids=&count=5&only_unfollowed=true",‘‘,function (res) {
console.log(res)
})
注意：在 JS 中而不是 XHR
3. 代理跨域
在 vue.config.js 中
module.exports = { devServer:{ host:‘localhost‘, port:8080, proxy:{ ‘/api‘:{ target:‘http://test/foodie-dev-api/‘, changeOrigin:true, pathRewrite:{ ‘/api‘:‘‘ } } } }, // publicPath:‘/app‘, // outputDir:‘dist‘, // indexPath:‘index2.html‘, // lintOnSave:false, productionSourceMap:true, chainWebpack:(config)=>{ config.plugins.delete(‘prefetch‘); } }
请求：
this.axios.get("/index/carousel") .then(res=>{ console.log(res) }) .catch(res=>{ console.log(res) })
原文：https://www.cnblogs.com/-xiao/p/12270073.html