时间戳

首页 > 解决方案 > CORS 请求错误（反应原生 / laravel 护照）

react-native - CORS 请求错误（反应原生 / laravel 护照）

问题描述

我创建了一个使用后端 API 的移动应用程序。我在 JS 端使用 fetch api 来发出我的请求。但是，我收到 CORS 错误

Error message: Access to fetch at 'mydomain.com' from origin 'null' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我尝试了以下方法：

A/ 在我的 .htaccess 中

 RewriteEngine On
 RewriteCond %{HTTPS} off
 RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]]
 <FilesMatch ".(ttf|otf|eot|woff)$">
 <IfModule mod_headers.c>
 Header set Access-Control-Allow-Origin "*"
 Header set Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
 Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With, token"
 Header set Access-Control-Allow-Credentials "true"
 </IfModule>

这至少可以让我的 GET 请求通过。

B/ 在我的 index.php 中

header("Access-Control-Allow-Origin: *")
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 1000");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");

与 .htaccess 的效果相同，只有 GET 请求通过，带有 OPTIONS 。我还看到我的 Access-Control-Allow-Origin 将是“*，null”，我会收到一条错误消息，指出只允许一个。

C. https://github.com/barryvdh/laravel-cors 在 AuthServiceProvider 中，我尝试了这两个。一次只有一个，而不是同时。

        Route::group([ 'middleware' => 'cors'], function() {
            Passport::routes();
        });

    Passport::routes(null, ['middleware' => [ \Barryvdh\Cors\HandleCors::class ]]);

D. 使用此代码创建了一个自定义中间件

    public function handle($request, Closure $next)
    {
                return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }

我转储了我的 $_SERVER，但找不到 HTTP_ORIGIN、HTTP_REFERER。我确实得到了我的 HTTP_REMOTE_ADDR

更令人沮丧的是我的应用程序运行正常，而我只是突然开始遇到问题（后端托管在 bluehost 上）

编辑：样品请求

var data = new FormData();

        data.append('grant_type', 'password');
        data.append('client_id', '2');
        data.append('client_secret', 'secret_token');
        data.append('scope', '*');

        data.append('username', 'mail');
        data.append('password', 'pwd');


        var link = (mydomain in https) + '/oauth/token';
        fetch(link, config)
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson);

            })
            .catch(err => {
                console.log(err);
            })

标签： react-nativelaravel-5

解决方案

很奇怪，但我遇到的问题是我的 fetch 配置

最初的一个：

    const config = {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'multipart/form-data;',
          'Authorization': 'Bearer ' + global.token,
        },
        body: data,
       }

修正过的

    const config = {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          //'Content-Type': 'multipart/form-data;',
          'Authorization': 'Bearer ' + global.token,
        },
        body: data,
       }

我刚刚删除了 'Content-Type': 'multipart/form-data;',

推荐阅读