Javascript 是什么原因让我一直犯这个CORS错误？

我使用react作为前端和laravel来验证用户，如下所示：

public function verify(Request $request)
{
  $user = User::where(['verification_token' => $request->id]);
  if($user->count() > 0) {
    $user = $user->first();
    $user->email_verified_at = Carbon::now();
    // $user->verification_token = null;
    $user->save();
    
    $token = $user->createToken('Laravel Password Grant Client')->accessToken;
    $user->getRoleNames(); // get role
    $response = ['token' => $token, 'user' => $user];

    // return response()->json($response, 200);
    return response()->json(200);
  } else {
    return response()->json(422);
  }
}

用户单击发送到其电子邮件的链接。这是url的结构

http://example.com/verify/?id=$2y$10$uUS8zNE6vpCu.DXd2jJtv..E4sSAA..5XQaw/oHOJaYjnHrCqiUs6

React获取id并构造对API的get请求，该API的域具有以下结构：

API.example.com

：

验证功能如下：

public function verify(Request $request)
{
  $user = User::where(['verification_token' => $request->id]);
  if($user->count() > 0) {
    $user = $user->first();
    $user->email_verified_at = Carbon::now();
    // $user->verification_token = null;
    $user->save();
    
    $token = $user->createToken('Laravel Password Grant Client')->accessToken;
    $user->getRoleNames(); // get role
    $response = ['token' => $token, 'user' => $user];

    // return response()->json($response, 200);
    return response()->json(200);
  } else {
    return response()->json(422);
  }
}

当我直接访问LaravelAPI路由（与react相反）时，我没有得到任何错误

My Kernel.php已经有水果蛋糕：

\Fruitcake\Cors\HandleCors:：class，

而

config\cors.php

文件保持不变，如下所示：

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

反应版本：“^16.13.1”

Laravel版本：7.30.4

以下是CORS错误：

Access to XMLHttpRequest at 'http://api.example.com/api/verify/?id=$2y$10$uUS8zNE6vpCu.DXd2jJtv..E4sSAA..5XQaw/oHOJaYjnHrCqiUs6' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


Error: Network Error
    at e.exports (createError.js:16)
    at XMLHttpRequest.p.onerror (xhr.js:84)


GET http://api.example.com/api/verify/?id=$2y$10$uUS8zNE6vpCu.DXd2jJtv..E4sSAA..5XQaw/oHOJaYjnHrCqiUs6 net::ERR_FAILED

---

我只是想了想，但也许你也应该在你的JS代码中添加这些属性

fetch('https://example.com', {
  credentials: 'include', // Normally only if you are using sessions and no JWT tokens
  mode: 'cors', // Has to be set in older versions of MS Edge
  // ... 
  headers: {
    'Access-Control-Allow-Origin':'*', // Allow connection with external domain-name 
  }
});

通过HTTP使用CORS可能会有问题，Chrome中的这个扩展也可能有帮助

---

尽管正确设置了laravel的

cors.php

，但我意识到仍然存在cors错误，这是由于客户端的请求URL和API端点之间的URL不匹配造成的客户端（请求）url不应该有一个尾随的正斜杠。

axios.get(`${Constants.API_DOMAIN}/api/verify/?id=${token}`, {
        headers: {
          Accept: "application/json",
        },
      }

在上面的示例中，您应该删除

/verify

后面的正斜杠，而是使用以下内容：

axios
      .get(`${Constants.API_DOMAIN}/api/verify?id=${token}`, {
        headers: {
          Accept: "application/json",
        },
      }

---

提供给axios的请求URL应与API端点完全匹配。否则，您将遇到飞行前请求cors错误，尤其是当您的请求中有cookie或请求不简单时。

我将尝试切换到获取，看看是否有帮助。@andromeda我没有使用axios的经验。但可能相同的属性（如模式、凭据、标题）也可以与axios配合使用：）问题已经解决，但我不确定是什么原因，因为我只将请求从get改为post，然后一步一步地重新编写组件。但仍在使用axios。我确实在github上看到了一个答案，说axios没有您提供的这些选项。答案还说，在axios失败的情况下，fetch会起作用，因为axios即使在您不希望的情况下也会强制执行CORS。我现在就不谈了，以后再看fetch。我一直碰到这个问题——它会消失，并经常出现。我提供了一个解释发生了什么的答案。使用邮递员或somehing@bhucho我在postman上没有错误，但在切换到post而不是get request后，我也设法解决了错误。我想使用post解决了问题，因为浏览器在发送post请求之前，向服务器发送选项请求，以检查可用于将该值作为post传递给get的“访问控制允许源”的值。没有要验证的选项请求发送。

axios.get(`${Constants.API_DOMAIN}/api/verify/?id=${token}`, {
        headers: {
          Accept: "application/json",
        },
      }

axios
      .get(`${Constants.API_DOMAIN}/api/verify?id=${token}`, {
        headers: {
          Accept: "application/json",
        },
      }