Ajax 使用及跨域

Ajax 存在跨域问题主要是浏览器端问题，浏览器的同源策略导致。

第一种方式：服务器端设置 header

  • 通过设置响应头Access-Control-Allow-Origin: '*' ，实现跨域。
  • 通过req.headers.origin 对象，判断请求来源。

以下是服务器端代码：
carbon.png

以下是浏览器端代码;
carbon.png

第二种方式：webpack 代理

fetch

fetch 返回一个Promise 对象。

  1. fetch('some_url').then((response) => {})

将 response 的结构如下所示：

// response 的结构
{
  body: ReadableStream
  bodyUsed: false
  headers: Headers
  ok : true
  redirected : false
  status : 200
  statusText : "OK"
  type : "cors"
  url : "http://some-website.com/some-url"
  __proto__ : Response
}