跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求
实现CORS的几种方式
- 本地代理
- nodejs中间件
- nginx代理
本地代理
webpack.dev里添加如下代码:
"proxy": {
"/api": {
"target": "http://127.0.0.1:8080/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
}
/api代表代理的路径名,target代表代理的地址,changeOrigin代表更改发出源地址为target,pathRewrite代表路径重写
至于CORS的三种代理方案优缺点主要如下:
- 设置webpack-dev-server的proxy最简单,但是通常只能用于本地环境,线上环境通常无法直接代理
- node代理书写比较方便灵活,而且不需要过多的学习成本,前端了解一定的后端知识然后写好异常捕捉就可以上手,还可以进行一些业务方面的处理,比如对接收请求进行拦截
网友评论