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

跨域

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

如www.baidu.com和zhidao.baidu.com 就是跨域

如何解决跨域

最常见的解决方案：

1. CORS，在服务器端设置响应头，如 Access-Control-Allow-Origin: *，前端无须设置，若要带 cookie 请求，前后端都需要设置。
2. Reverse Proxy（服务器反向代理），在 nginx/traefik/haproxy 等反向代理服务器中设置为同一域名
3. JSONP，

   原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

   缺点：JSON 只支持 get，因为 script 标签只能使用 get 请求；  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;
  }
}

出现跨域问题的原因:

在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。

在请求的过程中我们要想回传数据一般都是 post/get 请求，所以出现跨域问题

跨域问题来源于 JavaScript 的同源策略，即只有在协议+主机名+端口号(如存在)相同的情况下才允许相互访问。也就是说 JavaScript 只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。

同源策略

是由 NetScape 提出的一个著名的安全策略。所谓的同源，指的是协议，域名，端口相同。

浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。