Axios 中的 Cors OPTIONS 方法在 Laravel 和 Nginx 中失败

Posted

技术标签:

【中文标题】Axios 中的 Cors OPTIONS 方法在 Laravel 和 Nginx 中失败【英文标题】:Cors OPTIONS method in Axios fails with Laravel and Nginx 【发布时间】:2018-04-30 02:04:40 【问题描述】:

我用(Vue)Axios 做了一个webapp。所有 GET 请求都可以正常工作,但是在执行 POST 请求时它会失败..

在网络响应中,我看到它发送的是 OPTIONS 而不是 POST:

选项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 配置实现了这一点:"Wide open nginx CORS configuration"

我正在从我的 localhost:8080 的应用程序中对其进行全部测试。

【问题讨论】:

【参考方案1】:

enable-cors-and-php-fpm.conf

add_header 'Access-Control-Allow-Origin' '*' 总是;这个“总是”非常重要,允许 4** 3** 5** php-response-code 通过 nginx

您可能需要自定义“Access-Control-Allow-Headers”值

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;

【讨论】:

以上是关于Axios 中的 Cors OPTIONS 方法在 Laravel 和 Nginx 中失败的主要内容,如果未能解决你的问题,请参考以下文章

已解决 - CORS、OPTIONS 和 PreFlight 问题 在 Vue.js 中使用 Axios 使用 REST API

axios发送两次请求原因及解决方法

有啥方法可以避免 axios 中的 linkpreview.net 出现 CORS 错误,例如 Angular 中的 trustAsResourceUrl()?

OPTIONS 方法在跨域请求(CORS)中的应用

使用 React 和 Axios 更新 Firebase 中的数据

Vuex 模块 CORS 错误中的 Nuxtjs Axios