专栏首页坏男孩有关跨域请求的一些记录

有关跨域请求的一些记录

前言

最近做一个玩的东西需要用到天气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来允许我调用(没设置头部的话,同域名是正常使用的)。以我目前的能力可以有两个方案来解决此问题:

  • 使用动态语言来获取数据后再返回 转发此请求,为我所用 如果使用此方案的话,比较常见的是使用nginx来处理。不过对于帅7的我来说,那也太枯燥(费钱)了。
  • 这篇在<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:响应中标示允许的头部 所以当我们遇到跨域问题,就可以去检查响应端的这些参数,是否对请求的类型允许。

文档

[]: https://developer.mozilla.org/zh-CN/docs/Glossary/CORS “CORS 术语解释” []: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS “CORS 详解” []: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Vary “Vary参数 详解” []: https://developer.mozilla.org/zh-CN/docs/Glossary/Preflight_request “预加载 术语解释” []: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Request-Method “Access-Control-Request-Method参数 详解”

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 个人博客图片的解决方案

    ​ 每当我们看到一个没有图片的文章,总会在下面亲切的问候道“无图言屌”。所以博客的图片存放也是一个值得讨论的问题。因为本站使用的是hugo,自然编辑文章的时候也...

    yumusb
  • 博客由Hexo转向Hugo

    昨天(2019/12/11),感觉自己博客速度实在是太慢了,而主题太复杂则是我觉得速度太慢的主要原因.于是心血来潮,想给博客换一个主题,也找到了比较喜欢的(哎,...

    yumusb
  • 用flask来在线管理你的iptables

    之前写了一个简单的工具,可以使用户通过web访问来实时对访客IP进行加白,以便该用户访问该服务器上的其他服务 见 https://github.com/yumu...

    yumusb
  • 通过扩展让ASP.NET Web API支持W3C的CORS规范

    让ASP.NET Web API支持JSONP和W3C的CORS规范是解决“跨域资源共享”的两种途径,在《通过扩展让ASP.NET Web API支持JSONP...

    蒋金楠
  • Python库QR-Code制作动态二维码

    github:https://github.com/sylnsfar/qrcode

    菲宇
  • Android网络请求与数据解析,使用Gson和GsonFormat解析复杂Json数据

    【达叔有道】软件技术人员,时代作者,从 Android 到全栈之路,我相信你也可以!阅读他的文章,会上瘾!You and me, we are family !

    达达前端
  • 小巧实用的HTTP代理抓包工具:mitmproxy

    这步比较简单,直接pip install mitmproxy,或者自行下载安装包。更多更详细的安装说明可以查看这篇文章:MitmProxy的安装

    happyJared
  • 教你使用Python制作酷炫二维码

    该库在命令行中运行,你只需要传递网址链接、图片地址等参数,就可以生成相应的二维码,二维码图片默认保存在当前目录下面。

    Python进阶者
  • 架构演化:云原生时代正式开启

    用户1682855
  • 【Python】秀儿!两行代码制作你的专属动态二维码

    今天跟大家分享一个Python两行代码展现骚操作的小项目,生成自己专属的精美二维码,包括普通二维码、带图片的艺术二维码和动态二维码。先上一波效果图:

    灰小猿

扫码关注云+社区

领取腾讯云代金券