AJAX请求MusicBrainz API时CORS头错误：x-csrf-token不被允许

问题产生原因 #

你遇到的CORS报错核心是浏览器预检请求校验不通过，对应的错误信息如下：

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.

问题的根本原因有两个：

1. 你的项目全局配置了AJAX请求默认携带X-CSRF-Token请求头，这个头一般用于同域后端接口的CSRF防护，不属于跨域请求默认允许的标准头字段
2. MusicBrainz API的CORS规则没有放行X-CSRF-Token这个自定义头，浏览器发起预检OPTIONS请求校验失败后，直接拦截了后续的实际请求

对应解决方法 #

你可以选择以下任意一种方案修复：

• 方案一：单独给本次MusicBrainz请求移除不需要的CSRF头，在原有AJAX配置中新增headers参数覆盖全局配置即可，修改后代码如下：

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",
    // 新增配置移除CSRF头
    headers: {
        'X-CSRF-Token': undefined
    },
    success: myfunction
});

如果上述配置不生效，也可以用beforeSend回调删除对应头：

$.ajax({
    // 其余原有配置保持不变
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-CSRF-Token', '');
    },
    success: myfunction
});

• 方案二：修改全局AJAX配置，仅给同域接口添加CSRF头。如果你的项目是通过$.ajaxSetup统一添加的CSRF头，可以修改全局配置逻辑，判断请求地址属于本站域名时才添加该头，跨域请求不添加，避免后续调用其他第三方接口时重复出现同类问题。

内容的提问来源于stack exchange，提问作者Syed Umair