什么是跨域请求？如何解决跨域请求的问题？

发表于 作者 IT之美

跨域请求是指从一个域名的网页发送请求到另一个域名的资源。
同源策略禁止跨域请求,所以跨域请求会产生一些问题:

  1. Cookie、LocalStorage 和 IndexDB 无法读取。
  2. DOM 和 JavaScript 对象无法获得。
  3. AJAX 请求会被阻止。

要解决跨域请求的问题,有几种方案:

  1. JSONP:通过”<script>”标签请求跨域 JSON 数据,依赖 callback 函数名。只能发送 GET 请求。
<script src="http://domain/api?callback=handleResponse"></script>
<script>
  function handleResponse(data) {
    // ...
  } 
</script>
  1. CORS:通过服务器设置 Access-Control-Allow-Origin 来允许跨域请求。客户端和服务端都需要支持 CORS。
<script>
  fetch('http://domain/api')
</script>

服务端需要设置 header:

Access-Control-Allow-Origin: http://yourdomain.com
  1. POST 表单:通过 标签的 action 属性发起跨域 POST 请求。
<form method="POST" action="http://domain/api">
  <input type="text" name="data">
  <button type="submit">Submit</button> 
</form>
  1. WebSocket:WebSocket 协议可以建立跨域的全双工通信通道。
let ws = new WebSocket('ws://domain/api');
ws.onopen = () => { ... };
ws.onmessage = (e) => { ... };
  1. 代理:通过代理服务器转发跨域请求。客户端请求代理服务器,代理服务器转发到目标服务器。

所以有多种方案可以解决跨域请求的问题,需要根据具体场景选择合适的方案。跨域技术是前端工程师必备的重要技能之一,理解各种跨域方案的原理与使用场景是成为前端高手的重要一步。