跨域限制的由来
目的:为了安全考虑
触发情景:
- 浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同。如在页面强用ajax获取其他异步请求向其他网络地址发起请求。
- 只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操。
Flask 所做跨域处理
使用 flask_cors,对服务进行处理
from flask_cors import *
app = Flask(__name__)
CORS(app, supports_credentials=True)
Vue所做的跨域处理
在\config\index.js找到相应位置,添加下列代码。
module.exports = {
dev: {
proxyTable: {
'/api': {
target: 'http://localhost:500',
changeOrigin: true,
pathRewrite: {
'^/api': '' //实际请求去掉/api以空字符串代替
}
}
}
}
该代码的意义是 对请求url为 /api,进行转换,转换为 target所指的地址,但是根据自定义的路由机制将开头的/api去除。
实现效果是 当vue中请求url为'/api/test',在经过转化往后,vue服务的请求url是'http://localhost:5000/test'