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.
时间: 2023-07-05 15:32:03 浏览: 289
解决方案 ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’
5星 · 资源好评率100%
这个错误提示通常出现在跨域请求时,浏览器会先发送一个 OPTIONS 请求,以获取服务器是否支持跨域访问等信息。如果服务器没有设置 Access-Control-Allow-Origin 头部,或设置的值不包含请求的 Origin,那么浏览器就会阻止请求,出现这个错误提示。
为了解决这个问题,你需要在服务器端设置 Access-Control-Allow-Origin 头部,以允许跨域请求。可以在服务器端的响应中添加以下代码来设置该头部:
```
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Requested-With, Authorization');
```
其中,Access-Control-Allow-Origin 头部设置为 * 表示允许任何来源访问该资源,也可以设置为特定的域名。Access-Control-Allow-Methods 头部设置允许的请求方法,Access-Control-Allow-Headers 头部设置允许的请求头。
如果你使用的是 Laravel 框架,可以使用 Laravel 的中间件来设置 Access-Control-Allow-Origin 头部,例如:
```php
namespace App\Http\Middleware;
use Closure;
class Cors
{
public function handle($request, Closure $next)
{
$headers = [
'Access-Control-Allow-Origin' => '*',
'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
'Access-Control-Allow-Headers' => 'Content-Type, X-Auth-Token, Origin, Authorization'
];
if ($request->getMethod() == "OPTIONS") {
return response()->json('OK', 200, $headers);
}
$response = $next($request);
foreach($headers as $key => $value) {
$response->header($key, $value);
}
return $response;
}
}
```
这个中间件会检查请求方法是否为 OPTIONS,并设置 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 头部。同时,它也会添加这些头部到响应中,以允许跨域访问。最后,在 Laravel 的路由中使用这个中间件即可。
阅读全文