Cors header 错误 ajax 请求请求
Cors header error with ajax request request
我正在尝试向 musicbrainz api 发出 ajax 请求,但一直收到 cors header 错误。
错误:Access to XMLHttpRequest at 'https://musicbrainz.org/ws/2/release-group/?xxxxxxx' from origin 'https://my_url' has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.
代码
var $artist_encoded = encodeURIComponent($artist);
var $album_encoded = encodeURIComponent($album);
$.ajax({
type: "GET",
url: "https://musicbrainz.org/ws/2/release-group/?query=artist:%22" + $artist_encoded + "%22%20AND%20releasegroup:%22" + $album_encoded + "%22",
dataType: "xml",
success: myfunction
});
Cross-Origin 资源共享 (CORS) 是一种基于 HTTP-header 的机制,它允许服务器指示浏览器应允许的除其自身以外的任何来源(域、方案或端口)资源加载。因此,您必须向客户端(ajax 请求)添加权限才能接收来自服务器端的响应。
您可以通过创建一个新的中间件来处理这个问题:
<?php
namespace App\Http\Middleware;
use Closure;
class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
// Cors middleware for allow api access from client side 'vue project'
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin','*')
->header('Access-Control-Allow-Methods','*')
->header('Access-Control-Allow-Headers','*')
;
}
}
并在kernel.php
中注册新的中间件:
在中间件数组中添加:
protected $middleware = [
\App\Http\Middleware\Cors::class,
];
在路由中间件数组中添加:
protected $routeMiddleware = ['cors' => \App\Http\Middleware\Cors::class,
];
最终将这个中间件实现到路由中:
Route::group(['middleware' => ['cors']], function () {
//... your routes
});
添加时的结果:
->header('Access-Control-Allow-Origin','*')
这意味着您允许任何其他来源访问您的应用程序。您可以只添加一组要访问您的应用程序的特定路由。在你的情况下,我认为它是 ['127.0.0.1:8000']
// i hope it help you
$.ajax({
url: "https://musicbrainz.org/ws/2/place/478558f9-a951-4067-ad91-e83f6ba63e74?inc=aliases",
headers: {
'Content-Type':'text/xml',
},
dataType: "text",
success: function(text) {
console.log(text)
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
我正在尝试向 musicbrainz api 发出 ajax 请求,但一直收到 cors header 错误。
错误:Access to XMLHttpRequest at 'https://musicbrainz.org/ws/2/release-group/?xxxxxxx' from origin 'https://my_url' has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.
代码
var $artist_encoded = encodeURIComponent($artist);
var $album_encoded = encodeURIComponent($album);
$.ajax({
type: "GET",
url: "https://musicbrainz.org/ws/2/release-group/?query=artist:%22" + $artist_encoded + "%22%20AND%20releasegroup:%22" + $album_encoded + "%22",
dataType: "xml",
success: myfunction
});
Cross-Origin 资源共享 (CORS) 是一种基于 HTTP-header 的机制,它允许服务器指示浏览器应允许的除其自身以外的任何来源(域、方案或端口)资源加载。因此,您必须向客户端(ajax 请求)添加权限才能接收来自服务器端的响应。
您可以通过创建一个新的中间件来处理这个问题:
<?php
namespace App\Http\Middleware;
use Closure;
class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
// Cors middleware for allow api access from client side 'vue project'
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin','*')
->header('Access-Control-Allow-Methods','*')
->header('Access-Control-Allow-Headers','*')
;
}
}
并在kernel.php
中注册新的中间件:
在中间件数组中添加:
protected $middleware = [
\App\Http\Middleware\Cors::class,
];
在路由中间件数组中添加:
protected $routeMiddleware = ['cors' => \App\Http\Middleware\Cors::class,
];
最终将这个中间件实现到路由中:
Route::group(['middleware' => ['cors']], function () {
//... your routes
});
添加时的结果:
->header('Access-Control-Allow-Origin','*')
这意味着您允许任何其他来源访问您的应用程序。您可以只添加一组要访问您的应用程序的特定路由。在你的情况下,我认为它是 ['127.0.0.1:8000']
// i hope it help you
$.ajax({
url: "https://musicbrainz.org/ws/2/place/478558f9-a951-4067-ad91-e83f6ba63e74?inc=aliases",
headers: {
'Content-Type':'text/xml',
},
dataType: "text",
success: function(text) {
console.log(text)
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>