什么是JS跨域访问

一、什么是跨域

跨域是指从一个域名的网页去请求另一个域名的资源。比如：A上的页面获取B上的资源。

概念：只要协议、主机、端口有任何一个不同，都被当作是不同的域。

出于安全考虑，浏览器会限制从脚本内发起的跨域HTTP请求。

二、如何实现跨域访问

解决方案：

• JSONP
• CORS
• postMessage等

比较常用的是CORS（跨域资源共享）

跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。

服务器端对于CORS的支持，主要就是通过前后端HTTP HEADER设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

1. 简单模式（请求方法是 GET / POST / HEAD）

• 目标服务器在响应头（HTTP HEADER）里添加
  Access-Control-Origin:http://xxx.com
  浏览器就会允许http://xxx.com跨域。

• 如果添加通配符*Access-Control-Origin:*浏览器就会允许所有其他网站跨域。

2. 复杂模式（请求方法是PUT / DELETE / CONNECT / OPTIONS / TRACE / PATCH）

目标服务器在响应头（HTTP HEADER）里添加

Access-Control-Origin: http://xxx.com
Access-Control-Methods: GET, POST, HEAD, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH

浏览器会发两次请求，第一次是OPTIONS请求，询问目标服务器是否允许PUT/PATCH...，如果允许则发真正的请求。

参考链接：

• MDN：HTTP访问控制（CORS）
• fe/JavaScript/AJAX/04. 跨域请求.md
• 说说跨域那些事儿
• 详解js跨域问题