Vue 解决前后端跨域问题
什么是跨域？
跨域是指跨域名的访问，以下情况都属于跨域：
| 跨域原因说明 | 示例 |
|---|---|
| 域名不同 | www.tmall.com 与 www.taobao.com |
| 域名相同，端口不同 | www.tmall.com:8080 与 www.tmall.com:8081 |
| 二级域名不同 | pages.tmall.com 与 chaoshi.tmall.com |
如果域名和端口都相同，但是请求路径不同，不属于跨域，如：
www.tmall.com/pages
www.tmall.com/chaoshi
而我们如果是通过
80端口去访问8080端口,这属于域名相同端口不同，就产生了跨域请求。
为什么会有跨域问题？
跨域请求不一定有跨域问题
比如说：我们在使用百度搜索的时候，点击会跳转到其他网站。
因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能使用当前页同域名的路径，这能有效的阻止跨站攻击。
因此，跨域问题是针对于ajax的一种限制。
解决跨域问题的方案
Jsonp
/** 最早的解决方案，利用script标签可以跨域的原理实现 */
/** 优缺点 */
它的兼容性比较好，在更加古老的浏览器中都可以运行，
但是它只支持GET请求而不支持POST等其他类型的HTTP请求，
而且jsonp在调用失败的时候不会返回各种HTTP状态码，
还有是安全性不高，假如jsonp的服务器存在页面注入漏洞，那么所有调用这个jsonp的网站都会存在漏洞，无法把危险控制在一个域名下。
代理模式
/** 利用代理把跨域变为不跨域 */
/** 优缺点 */
可以支持各种请求方式，但是需要进行额外的配置，如果说前端解决跨域问题，那么使用代理是比较不错的。
CORS
/** 规范化的跨域请求解决方案，安全可靠 */
/** 优缺点 */
在服务端进行控制是否允许跨域，支持各种请求方式的同事可自定义规则，会产生额外的请求。
使用代理的方式解决跨域问题
// 首先需要在根目录下找到vue.config.js文件，如果没有该文件就手动创建一个
// vue.config.js 文件中 - 这里演示了配置多个代理
/**
* 可以在此进行一些配置，解决跨域问题
*/
module.exports = {
// 设置开发服务器
devServer: {
// 配置代理
proxy: {
// 设置需要拦截的请求路径
'/api_1': {
// 代理的目标地址
target: 'http://127.0.0.1:5000',
// 是否改变发送请求的地址
changeOrigin: true,
// 是否重写地址
pathRewrite: {
'^/api_1': ''
}
},
'/api_2': {
// 代理的目标地址
target: 'http://127.0.0.1:5001',
// 是否改变发送请求的地址
changeOrigin: true,
// 是否重写地址
pathRewrite: {
'^/api_2': ''
}
}
}
}
}
// 在使用axios发送请求的时
// “/api_1” 前面的请求路径可以不写，默认会有的
axios.get("/api_1").then((res) => {
console.log(res);
});
axios.get("/api_2").then((res) => {
console.log(res);
});
