如何实现浏览器跨域请求

跨域请求（Cross-Origin Request），简称CORS，是指在Web开发中，当一个Web页面向不同源（域名、协议或端口）的服务器发起请求时，浏览器会遵循同源策略（Same-Origin Policy）的限制，对这些跨源请求进行限制（跨域限制仅仅是浏览器的行为）。

同源策略是一种安全策略，它限制了来自不同源的脚本在浏览器中运行。一个源指的是由协议、主机名和端口号组成的URL。同源策略要求脚本只能访问和执行来自同一源的资源和数据，不能访问其他源的资源和数据，这样可以防止跨站点请求伪造（Cross-Site Request Forgery, CSRF）等安全问题。

通过代理服务器，或者其他工具发送请求就能轻松绕过浏览器的跨域限制，但其实它很重要，是web安全的基石。

原因：

1
2
3
4
随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。

当一个Web页面中的JavaScript代码通过Ajax等方式向不同源的服务器发送HTTP请求时，浏览器会拒绝该请求，因为它违反了同源策略。这时，如果服务器端允许该跨域请求，就需要使用CORS来进行跨域请求的控制。

CORS是一种通过HTTP头部来与浏览器进行沟通的机制，它允许服务器在响应中包含一个特殊的HTTP头部，来告诉浏览器该服务器允许跨域请求。在浏览器收到带有CORS头部的响应后，如果该请求符合服务器设置的规则，浏览器将允许跨域请求，否则仍会拒绝。

常见的CORS头部包括：

1
2
3
4
5
6
Access-Control-Allow-Origin：指定哪些源（域名）可以访问服务器的资源。可以设置为*，表示允许所有源访问，或者指定具体的源。
Access-Control-Allow-Methods：指定支持的HTTP请求方法，比如GET、POST、PUT等。
Access-Control-Allow-Headers：指定允许请求中携带的自定义头部信息。
Access-Control-Allow-Credentials：指定是否允许请求携带凭证信息（比如cookies）。

通过使用CORS，服务器可以控制哪些跨域请求是被允许的，从而实现跨域资源共享，使Web应用能够安全地进行跨域数据交互。

常见的跨域请求方式：有jsonp方式、服务器代理、CORS三种方式 。

Jsonp与CORS(跨域资源共享)的区别：

  1. JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求
  2. 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理；而JSONP主要结合Ajax使用
  3. 老的浏览器支持JSONP却不支持CORS，而绝大多数现代浏览器都已经支持了CORS