Programing

Axios의 Cors OPTION 메서드가 Laravel 및 Nginx와 함께 실패함

c10106 2022. 4. 29. 20:49
반응형

Axios의 Cors OPTION 메서드가 Laravel 및 Nginx와 함께 실패함

나는 (Vue)로 웹앱을 만들었다.Axios. 모든 GET-요청은 완벽하게 작동하지만 POST-요청을 할 때는 실패한다.

네트워크 응답에서 POST 대신 OPTION을 보내는 것을 알 수 있다.

옵션 https://api.website.com/sheeps

Chrome에서는 다음과 같은 회신을 받는다.

OPTIONS https://api.website.com/sheeps net::ERR_NAME_NOT_RESOLVED

그리고 Safari에서는:

Failed to load resource: cancelled
XMLHttpRequest cannot load https://api.website.com/sheeps due to access control checks.

이것은 아마도 Laravel 5.5에서 작성한 API 어플리케이션 때문에 실패하는 것 같아.그래서 나는 이 소포를 LaravelCors에 추가했다.문서를 보면 그게 고칠 수 있을 거라고 나와 있어구성은 다음과 같다.

[
    'supportsCredentials' => true,
    'allowedOrigins'      => ['*'],
    'allowedHeaders'      => ['*'],
    'allowedMethods'      => ['*'],
    'exposedHeaders'      => [],
    'maxAge'              => 0,
]

그리고 문서로 작성한 것처럼 구성했다

하지만 전혀 고쳐지지 않는다.

서버가 Nginx에서 실행 중임.내가 Laravel 어플리케이션으로 고칠 수 있을까?

Nginx 구성에도 구현:"개방된 nginx CORS 구성"

내 지역 호스트:8080의 애플리케이션에서 모든 것을 테스트하고 있다.

enable-php-fpm.conf

add_header 'Access-Control-Allow-Origin' '*' 항상; 이 "항상"은 nginx를 통해 4*** 3** 5*** php-response-code를 허용하기 위해 매우 중요하다.

"액세스-제어-허용-헤더" 값을 비용화해야 할 수 있음

location ~ [^/]\.php(/|$)
    {

        # CORS settings
        # http://enable-cors.org/server_nginx.html
        # http://10.10.0.64 - It's my front end application
         if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Authorization';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
         }
         if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Authorization';
         }
         if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Authorization';
         }
         try_files $uri =404;
         fastcgi_pass  127.0.0.1:9000;
         fastcgi_index index.php;
         include fastcgi.conf;

    }

www.your-api.com.conf

server {
    listen       80;
    server_name  localhost;
    root   /home/admin.api.qmmian.cn/public;
    index index.php index.html index.htm;
    ## laravel config
    location / {
        try_files $uri/ /index.php?$query_string;
    }
    ##enable cors and enable php-fpm
    include enable-php-cors.conf;

}

fastcgi.conf

fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
fastcgi_param  QUERY_STRING       $query_string;
fastcgi_param  REQUEST_METHOD     $request_method;
fastcgi_param  CONTENT_TYPE       $content_type;
fastcgi_param  CONTENT_LENGTH     $content_length;

fastcgi_param  SCRIPT_NAME        $fastcgi_script_name;
fastcgi_param  REQUEST_URI        $request_uri;
fastcgi_param  DOCUMENT_URI       $document_uri;
fastcgi_param  DOCUMENT_ROOT      $document_root;
fastcgi_param  SERVER_PROTOCOL    $server_protocol;
fastcgi_param  REQUEST_SCHEME     $scheme;
fastcgi_param  HTTPS              $https if_not_empty;

fastcgi_param  GATEWAY_INTERFACE  CGI/1.1;
fastcgi_param  SERVER_SOFTWARE    nginx/$nginx_version;

fastcgi_param  REMOTE_ADDR        $remote_addr;
fastcgi_param  REMOTE_PORT        $remote_port;
fastcgi_param  SERVER_ADDR        $server_addr;
fastcgi_param  SERVER_PORT        $server_port;
fastcgi_param  SERVER_NAME        $server_name;

# PHP only, required if PHP was built with --enable-force-cgi-redirect
fastcgi_param  REDIRECT_STATUS    200;

참조URL: https://stackoverflow.com/questions/47331269/cors-options-method-in-axios-fails-with-laravel-and-nginx

반응형