前言# {#前言}

最近做一个玩的东西需要用到天气API，便从今天头条首页抓了一个想自己用。https://www.toutiao.com/stream/widget/local_weather/data/，可当我高高兴兴的引入JQuery并打算发起请求

<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    $.get(
      'https://www.toutiao.com/stream/widget/local_weather/data/',
      function(data){
        alert(data);
      },'json'
    )
  </script>

但是无论如何都获取不到数据，打开F12看到如下报错：

Access to XMLHttpRequest at 'https://www.toutiao.com/stream/widget/local_weather/data/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

开始# {#开始}

官方定义，CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。同源安全策略 默认阻止"跨域"获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。通俗一点来说呢，就是浏览器有权决定是否阻止网页上的JavaScript从不同域名下调取数据的行为，但是你也可以通过服务器返回的HTTP头部来决定浏览器不去阻止此请求。

所以上面我调用头条API的行为就被浏览器阻止了，因为头条的服务器并没有设置一个Access-Control-Allow-Origin来允许我调用（没设置头部的话，同域名是正常使用的）。~~解决的办法很简单，就是让头条把API开放给大家用，显然是不现实的~~。以我目前的能力可以有两个方案来解决此问题：

• 使用动态语言来获取数据后再返回

  ~~该部分不在本篇内容重点，以后一定写！~~

• 转发此请求，为我所用

  如果使用此方案的话，比较常见的是使用nginx来处理。不过对于帅7（~~贫穷~~ ）的我来说，那也太枯燥（~~费钱~~）了。

  正好我在CloudFlare的Worker模板中看到了一个正对我需求的内容，所以就以此来理解CORS跨域吧！这篇在<https://developers.cloudflare.com/workers/templates/pages/cors_header_proxy/>，其中用到的脚本在这里<https://github.com/ashleygwilliams/template-registry/blob/master/templates/javascript/cors_header_proxy.js>这个脚本主要功能是为了解决跨域问题，并且写了转发请求和原始请求的对比，我直接写注释以阐述我的理解与想法。（废话较多，需要的同学可以直接划过看下面的总结）

  async function handleRequest(request) {
    const url = new URL(request.url)
    const apiurl = url.searchParams.get('apiurl')
    // Rewrite request to point to API url. This also makes the request mutable
    // so we can add the correct Origin header to make the API server think
    // that this request isn't cross-site.
    request = new Request(apiurl, request)
    request.headers.set('Origin', new URL(apiurl).origin)
      //为请求添加一个Origin属性，保证原始请求可以正常发送。
    let response = await fetch(request)
    // Recreate the response so we can modify the headers
    response = new Response(response.body, response)
    // Set CORS headers
    response.headers.set('Access-Control-Allow-Origin', url.origin)
    // Append to/Add Vary header so browser will cache response correctly
    response.headers.append('Vary', 'Origin')
      //设置响应头中的Access-Control-Allow-Origin为此次访问本次浏览器请求URL的origin，并说明此属性将跟随Vary变化
    return response
  }
  // 所以这部分我们可以总结到：
  //Access-Control-Allow-Origin 正是控制请求的关键参数，如果我们需要对不同域名请求做出变化的话，还需要使用Vary参数告知浏览器。
  function handleOptions(request) {
    // Make sure the necesssary headers are present
    // for this to be a valid pre-flight request
    if (
      request.headers.get('Origin') !== null &&
      request.headers.get('Access-Control-Request-Method') !== null &&
      request.headers.get('Access-Control-Request-Headers') !== null
    ) {
      // Handle CORS pre-flight request.
      // If you want to check the requested method + headers
      // you can do that here.
      return new Response(null, {
        headers: corsHeaders,
      })
    } else {
      // Handle standard OPTIONS request.
      // If you want to allow other HTTP Methods, you can do that here.
      return new Response(null, {
        headers: {
          Allow: 'GET, HEAD, POST, OPTIONS',
        },
      })
    }
  }
  addEventListener('fetch', event => {
    const request = event.request
    const url = new URL(request.url)
    if (url.pathname.startsWith(proxyEndpoint)) {
      if (request.method === 'OPTIONS') {
        // Handle CORS preflight requests
        event.respondWith(handleOptions(request))
      } else if (
        request.method === 'GET' ||
        request.method === 'HEAD' ||
        request.method === 'POST'
      ) {
        // Handle requests to the API server
        event.respondWith(handleRequest(request))
      } else {
        event.respondWith(async () => {
          return new Response(null, {
            status: 405,
            statusText: 'Method Not Allowed',
          })
        })
      }
    } else {
      // Serve demo page
      event.respondWith(rawHtmlResponse(demoPage))
    }
  })
  // We support the GET, POST, HEAD, and OPTIONS methods from any origin,
  // and accept the Content-Type header on requests. These headers must be
  // present on all responses to all CORS requests. In practice, this means
  // all responses to OPTIONS requests.
  const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
      //允许所有域名发起请求
    'Access-Control-Allow-Methods': 'GET, HEAD, POST, OPTIONS',
      //允许的请求方式
    'Access-Control-Allow-Headers': 'Content-Type',
      //允许的头部，比如post发送Json数据，或者需要`authorization`头部时候会用到
  }
  // The URL for the remote third party API you want to fetch from
  // but does not implement CORS
  const apiurl = 'https://workers-tooling.cf/demos/demoapi'
  // The endpoint you want the CORS reverse proxy to be on
  const proxyEndpoint = '/corsproxy/'
  // The rest of this snippet for the demo page
  async function rawHtmlResponse(html) {
    return new Response(html, {
      headers: {
        'content-type': 'text/html;charset=UTF-8',
      },
    })
  }
  const demoPage = `
  <!DOCTYPE html>
  <html>
  <body>
    <h1>API GET without CORS Proxy</h1>
    <a target='_blank' href='https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful'>Shows TypeError: Failed to fetch since CORS is misconfigured</a>
    <p id='noproxy-status'/>
    <code id='noproxy'>Waiting</code>
    <h1>API GET with CORS Proxy</h1>
    <p id='proxy-status'/>
    <code id='proxy'>Waiting</code>
    <h1>API POST with CORS Proxy + Preflight</h1>
    <p id='proxypreflight-status'/>
    <code id='proxypreflight'>Waiting</code>
    <script>
    let reqs = {};
    reqs.noproxy = async () => {
      let response = await fetch('${apiurl}')
      return await response.json()
    }
    reqs.proxy = async () => {
      let response = await fetch(window.location.origin + '${proxyEndpoint}?apiurl=${apiurl}')
      return await response.json()
    }
    reqs.proxypreflight = async () => {
      const reqBody = {
        msg: "Hello world!"
      }
      let response = await fetch(window.location.origin + '${proxyEndpoint}?apiurl=${apiurl}', {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(reqBody),
      })
      return await response.json()
    }
    (async () => {
      for (const [reqName, req] of Object.entries(reqs)) {
        try {
          let data = await req()
          document.getElementById(reqName).innerHTML = JSON.stringify(data)
        } catch (e) {
          document.getElementById(reqName).innerHTML = e
        }
      }
    })()
    </script>
  </body>
  </html>`
  

  总结一下以上用到的参数：

  请求端：

  Origin：请求中用来标示源的字段

  Access-Control-Request-Method：Preflight request（预请求）中标示本次请求方式的字段

  Access-Control-Request-Headers：Preflight request（预请求）中标示本次请求头部的字段

  响应端：

  Access-Control-Allow-Origin：响应中标示允许源的字段

  Vary：响应中标示此次请求响应是以何种方式判别（好像很拗口），就是用来告诉浏览器如何控制缓存的啦。如果本次请求返回'Vary: Origin'，说明响应是根据源来响应的，下次同源的请求就可以使用上次的缓存了。

  Access-Control-Allow-Methods：响应中标示允许的请求方式

  Access-Control-Allow-Headers：响应中标示允许的头部

  所以当我们遇到跨域问题，就可以去检查响应端的这些参数，是否对请求的类型允许。