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>