vue如何解决跨域

vue如何解决跨域

1. 什么是跨域

• 跨域本质是浏览器的一种给予同源策略的安全手段，是浏览器最核心的安全功能
• 所谓同源就是要protocol协议相同，host主机相同哥port端口相同
• 反之就是非同源，也就是跨域
• 跨域的结果就是浏览器拿不到数据

2. 如何解决

2.1 CROS（Cross-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 express=require('express')
const proxy=require('http-proxy-middleware')
const app=express()
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;
     }
}