对Nginx中的静态html资源的Jquery Ajax请求导致"405 Not Allowed". [英] Jquery Ajax request to an static html resource in Nginx causes a "405 Not Allowed"

问题描述

我有一个带有简单index.thml的Nginx，它在Docker中运行.如果我从带有http://localhost:8979/index.html的浏览器中调用它，一切都会正常，但是当我从另一台服务器(https://localhost:8447/)的JQuery Ajax调用它时，

I have an Nginx with a simple index.thml running within a Docker. Everything works fine if I call it from a browser with http://localhost:8979/index.html, but when I call it from JQuery Ajax in another server (https://localhost:8447/) like this

 $.ajax({
            type: "GET",
            url: "http://localhost:8979/index.html",
            crossDomain: true,
            success: function (data) {
                $("#myDiv").html(data);
            }
        });

我收到此错误:

CORS策略已阻止从源"https://localhost:8447"访问"http://localhost:8979/index.html"处的XMLHttpRequest:对预检请求的响应未通过访问控制检查:请求的资源上没有"Access-Control-Allow-Origin"标头.

Access to XMLHttpRequest at 'http://localhost:8979/index.html' from origin 'https://localhost:8447' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我的Nginx配置是这样的:

My Nginx configuration is this:

server { 
 listen 80;
 location / {
   add_header 'Access-Control-Allow-Origin' '*';
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
   add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type'; 
 }
}

我可以在Devtools中看到这两个请求:

I can see in Devtools this two requests:

General
    Request URL: http://localhost:8979/index.html
    Referrer Policy: strict-origin-when-cross-origin
Provisional headers are shown
    Accept: */*
    Access-Control-Allow-Origin: *
    Referer
    sec-ch-ua: "Chromium";v="86", "\"Not\\A;Brand";v="99", "Google Chrome";v="86"
    sec-ch-ua-mobile: ?0
    User-Agent: M

General
    Request URL: http://localhost:8979/index.html
    Request Method: OPTIONS
    Status Code: 405 Not Allowed
    Remote Address: [::1]:8979
    Referrer Policy: strict-origin-when-cross-origin
Response Headers
    Connection: keep-alive
    Content-Length: 559
    Content-Type: text/html
    Date: Thu, 12 Nov 2020 17:54:48 GMT
    Server: nginx/1.19.4
Request Headers
    Accept: */*
    Accept-Encoding: gzip, deflate, br
    Accept-Language: es-ES,es;q=0.9,zh-CN;q=0.8,zh;q=0.7
    Access-Control-Request-Headers: access-control-allow-origin
    Access-Control-Request-Method: GET
    Connection: keep-alive
    Host: localhost:8979
    Origin: https://localhost:8447
    Sec-Fetch-Dest: empty
    Sec-Fetch-Mode: cors
    Sec-Fetch-Site: cross-site
    User-Agent: Mozilla/5.0 (Windows NT 1....

我的Docker文件:

My Docker file:

FROM nginx
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY ./src/static /usr/share/nginx/html

是Ajax请求中的问题还是配置问题?

Is the problem in the Ajax request or is a configuration issue?

推荐答案

尝试以下方法:

map $request_method $options_content_type {
    OPTIONS    "text/plain";
}
map $request_method $options_content_length {
    OPTIONS    0;
}
server { 
    listen 80;
    location / {
        if ($request_method = OPTIONS) { return 204; }
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
        add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type'; 
        add_header Content-Type $options_content_type;
        add_header Content-Length $options_content_length;
    }
}

当心！您将GET，POST，OPTIONS，DELETE和PUT声明为允许的HTTP方法，但实际上，除了GET(现在是OPTIONS)之外，此配置均不起作用.您真的需要所有其他方法吗?

Beware! You are declaring GET, POST, OPTIONS, DELETE and PUT as allowed HTTP methods, but in fact nothing except GET (and now OPTIONS) will work with this configuration. Do you really need all the other methods?

这篇关于对Nginx中的静态html资源的Jquery Ajax请求导致"405 Not Allowed".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！