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-12 10:04:09 浏览: 409
是的,这个错误提示通常表示浏览器发起的跨域请求被目标服务器拒绝了。在跨域请求时,浏览器会先发送一个预检请求(Preflight Request),以确定目标服务器是否允许跨域请求。如果服务器返回的响应头中没有包含 Access-Control-Allow-Origin 字段,就会出现这个错误。要解决这个问题,可以在服务器端添加 Access-Control-Allow-Origin 响应头,或者使用代理等技术绕过跨域限制。
相关问题
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.
这个错误提示通常出现在跨域请求时,浏览器会先发送一个 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 的路由中使用这个中间件即可。
vue3发送axios请求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.
这个错误通常是因为浏览器的同源策略所导致的。在Vue3发送跨域请求时,服务端需要设置响应头中的 `Access-Control-Allow-Origin` 字段,来允许跨域请求。如果服务端没有设置这个响应头,浏览器会阻止请求。
解决这个问题的方法有以下几种:
1. 在服务端设置相应的响应头,例如在响应中添加 `Access-Control-Allow-Origin: *` 来允许所有域名进行跨域请求。
2. 在Vue3中使用代理来进行跨域请求。在 `vue.config.js` 文件中设置代理,例如:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
这里的意思是将所有以 `/api` 开头的请求代理到 `http://localhost:3000` 上,并且将请求路径中的 `/api` 去掉。
3. 在Vue3中使用JSONP进行跨域请求。JSONP是一种利用 `<script>` 标签进行跨域请求的方法,可以避免浏览器的同源策略。在Vue3中可以使用第三方库如 `vue-jsonp` 来进行JSONP请求。
阅读全文