如何使跨域资源共享 (CORS) 发布请求正常工作

2022-01-15 00:00:00 cors cherrypy jquery ajax

我的本​​地局域网 (machineA) 上有一台机器,它有两个 Web 服务器.第一个是 XBMC 中的内置库(在端口 8080 上)并显示我们的库.第二个服务器是一个 CherryPy python 脚本(端口 8081),我用它来按需触发文件转换.文件转换由来自 XBMC 服务器提供的页面的 AJAX POST 请求触发.

I have a machine on my local lan (machineA) that has two web servers. The first is the in-built one in XBMC (on port 8080) and displays our library. The second server is a CherryPy python script (port 8081) that I am using to trigger a file conversion on demand. The file conversion is triggered by a AJAX POST request from the page served from the XBMC server.

  • 转到显示库的 http://machineA:8080
  • 显示库
  • 用户点击转换"链接发出以下命令 -

jQuery Ajax 请求

jQuery Ajax Request

$.post('http://machineA:8081', {file_url: 'asfd'}, function(d){console.log(d)})

  • 浏览器发出带有以下标头的 HTTP OPTIONS 请求;
  • 请求标头 - 选项

    Host: machineA:8081
    User-Agent: ... Firefox/4.01
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language: en-us,en;q=0.5
    Accept-Encoding: gzip,deflate
    Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
    Keep-Alive: 115
    Connection: keep-alive
    Origin: http://machineA:8080
    Access-Control-Request-Method: POST
    Access-Control-Request-Headers: x-requested-with
    

    • 服务器响应如下;
    • 响应标头 - OPTIONS(状态 = 200 OK)

      Content-Length: 0
      Access-Control-Allow-Headers: *
      Access-Control-Max-Age: 1728000
      Server: CherryPy/3.2.0
      Date: Thu, 21 Apr 2011 22:40:29 GMT
      Access-Control-Allow-Origin: *
      Access-Control-Allow-Methods: POST, GET, OPTIONS
      Content-Type: text/html;charset=ISO-8859-1
      

      • 谈话随即停止.理论上,浏览器应该发出 POST 请求,因为服务器使用正确的 (?) CORS 标头进行响应(Access-Control-Allow-Origin: *)
      • 为了解决问题,我还从 http://jquery.com 发出了相同的 $.post 命令.这是我被难住的地方,来自 jquery.com,post 请求有效,OPTIONS 请求在 POST 之后发送.此交易的标头如下;

        For troubleshooting, I have also issued the same $.post command from http://jquery.com. This is where I am stumped, from jquery.com, the post request works, a OPTIONS request is sent following by a POST. The headers from this transaction are below;

        请求标头 - 选项

        Host: machineA:8081
        User-Agent: ... Firefox/4.01
        Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
        Accept-Language: en-us,en;q=0.5
        Accept-Encoding: gzip,deflate
        Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
        Keep-Alive: 115
        Connection: keep-alive
        Origin: http://jquery.com
        Access-Control-Request-Method: POST
        

        响应标头 - OPTIONS(状态 = 200 OK)

        Content-Length: 0
        Access-Control-Allow-Headers: *
        Access-Control-Max-Age: 1728000
        Server: CherryPy/3.2.0
        Date: Thu, 21 Apr 2011 22:37:59 GMT
        Access-Control-Allow-Origin: *
        Access-Control-Allow-Methods: POST, GET, OPTIONS
        Content-Type: text/html;charset=ISO-8859-1
        

        请求标头 - POST

        Host: machineA:8081
        User-Agent: ... Firefox/4.01
        Accept: */*
        Accept-Language: en-us,en;q=0.5
        Accept-Encoding: gzip,deflate
        Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
        Keep-Alive: 115
        Connection: keep-alive
        Content-Type: application/x-www-form-urlencoded; charset=UTF-8
        Referer: http://jquery.com/
        Content-Length: 12
        Origin: http://jquery.com
        Pragma: no-cache
        Cache-Control: no-cache
        

        响应标头 - POST(状态 = 200 OK)

        Content-Length: 32
        Access-Control-Allow-Headers: *
        Access-Control-Max-Age: 1728000
        Server: CherryPy/3.2.0
        Date: Thu, 21 Apr 2011 22:37:59 GMT
        Access-Control-Allow-Origin: *
        Access-Control-Allow-Methods: POST, GET, OPTIONS
        Content-Type: application/json
        

        我不明白为什么同一个请求可以在一个站点上运行,而在另一个站点上却不行.我希望有人能够指出我所缺少的.感谢您的帮助!

        I can't work out why the same request would work from one site, but not the other. I am hoping someone might be able to point out what I am missing. Thanks for your help!

        推荐答案

        我终于偶然发现了这个链接一个 CORS POST 请求适用于纯 javascript,但为什么不使用 jQuery?"指出 jQuery 1.5.1 添加了

        I finally stumbled upon this link "A CORS POST request works from plain javascript, but why not with jQuery?" that notes that jQuery 1.5.1 adds the

         Access-Control-Request-Headers: x-requested-with
        

        所有 CORS 请求的标头.jQuery 1.5.2 不这样做.另外,根据同一个问题,设置服务器响应头为

        header to all CORS requests. jQuery 1.5.2 does not do this. Also, according to the same question, setting a server response header of

        Access-Control-Allow-Headers: *
        

        不允许继续响应.您需要确保响应标头特别包含所需的标头.即:

        does not allow the response to continue. You need to ensure the response header specifically includes the required headers. ie:

        Access-Control-Allow-Headers: x-requested-with 
        

相关文章