网站分析seo情况,初二信息课网站怎么做,网站建设公司济南,企业培训考试系统官网文章目录 vue如何解决跨域1. 什么是跨域2. 如何解决2.1 CROS#xff08;Cross-Origin Resource Sharing#xff0c;跨域资源共享#xff09;2.2 Proxy2.2.1 使用webpack proxy2.2.2 服务端代理转发2.2.3 通过nginx实现代理 vue如何解决跨域
1. 什么是跨域
跨域本质是浏览器… 文章目录 vue如何解决跨域1. 什么是跨域2. 如何解决2.1 CROSCross-Origin Resource Sharing跨域资源共享2.2 Proxy2.2.1 使用webpack proxy2.2.2 服务端代理转发2.2.3 通过nginx实现代理 vue如何解决跨域
1. 什么是跨域
跨域本质是浏览器的一种给予同源策略的安全手段是浏览器最核心的安全功能所谓同源就是要protocol协议相同host主机相同哥port端口相同反之就是非同源也就是跨域跨域的结果就是浏览器拿不到数据
2. 如何解决
2.1 CROSCross-Origin Resource Sharing跨域资源共享
CROS是一个系统他由一系列传输的HTTP头组成这些HTTP头决定浏览器是否阻止前端JS代码获取跨域请求的响应CROS实现起来非常方便只需要增加一些HTTP头让服务器能声明允许的访问来源只要后端实现了CROS就实现了跨域我们可以设置response的HTTP头
// 设置允许的源Origin* 表示接受所有域的请求
response.setHeader(Access-Control-Allow-Origin, *);
// 设置允许的HTTP方法如GET, POST等
response.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS);
// 设置允许的头部信息
response.setHeader(Access-Control-Allow-Headers, Content-Type, Accept, X-Requested-With, remember-me);
// 预检请求的缓存时间
response.setHeader(Access-Control-Max-Age, 3600);
// 是否支持凭证cookies、HTTP认证等
response.setHeader(Access-Control-Allow-Credentials, true);
2.2 Proxy
2.2.1 使用webpack proxy
就是找一个中间人作为代理比如我们在使用webpack时通过proxy实现代理具体看这篇文章 一文大白话讲清楚webpack进阶——11——webpack proxy工作原理但是只限于开发环境如果生产环境还不不同源那还是存在跨域问题
2.2.2 服务端代理转发
以express为例利用中间件实现代理转发
const expressrequire(express)
const proxyrequire(http-proxy-middleware)
const appexpress()
app.use(api/,proxy({target:http//localhost:8080,changeOrigin:false
}))2.2.3 通过nginx实现代理
server {listen 80;# server_name www.josephxia.com;location / {root /var/www/html;index index.html index.htm;try_files $uri $uri/ /index.html;}location /api {proxy_pass http://127.0.0.1:3000;proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}
