高级前端js【Q215】什么是跨域,如何解决跨域问题

什么是跨域,如何解决跨域问题

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 216

Author 回答者: shfshanyue

跨域

协议域名端口,三者有一不一样,就是跨域

案例一:www.baidu.comzhidao.baidu.com 是跨域

如何解决跨域

目前有两种最常见的解决方案:

  1. CORS,在服务器端设置几个响应头,如 Access-Control-Allow-Origin: *
  2. Reverse Proxy,在 nginx/traefik/haproxy 等反向代理服务器中设置为同一域名
  3. JSONP,详解见 JSONP 的原理是什么,如何实现

附代码: nginx 关于跨域的配置

server {
  listen 80;
  server_name shanyue.tech;

  location / {
    # 避免非root路径404
    try_files $uri $uri/ /index.html;
  }

  # 解决跨域
  location /api {
    # 或者是 http://localhost:8080
    proxy_pass http://api.shanyue.tech;
  }
}