前言# {#前言}
最近做一个玩的东西需要用到天气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:响应中标示允许的头部
所以当我们遇到跨域问题,就可以去检查响应端的这些参数,是否对请求的类型允许。