解决跨域请求错误问题 (failed) net::ERR_FAILED (CORS问题)

跨域请求错误问题，算是一个常见但又不是100%遇得到的问题。

简单的说会在浏览器控制台中，看到有关资源（包括且不限于图片、字体等）请求失败的提示，一般控制台会提示：“(failed) net::ERR_FAILED”，如果是中文控制台的话会提示：“(CORS问题)”。

这个问题是怎么遇到的呢，就是我准备更换博客里字体时。当时发现页面中一些引用友站的字体文件不加载（路径地址没错），找了一圈后，在Chrome控制台中看到了错误提示，资源加载失败

错误提示后，已经能定位出问题了，搜索一番知道了是遇到了跨域请求错误问题（也叫CORS问题），后面也找到办法修复了

CORS

提到这个问题，中文叫跨域资源共享标准（Cross-Origin Resource Sharing），有时也被称为同源策略，是浏览器在处理页面内引用了不同地方的资源时使用的一种机制（策略）。

比如，站点 http://a.com 的某 HTML 页面通过 <img> 的 src 请求 http://b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

为什么浏览器要引入这个策略呢？简单的说就是安全原因，跨站请求有可能会引起CSRF（Cross-site request forgery，中文：跨站请求伪造）攻击。

那么怎么解决这个问题呢？Mozilla其实已经解释过，需要“响应报文包含了正确CORS响应头”。

了解HTTP的人都会知道，每次HTTP请求发送的数据（也就是术语所说的“报文”），在头部都会包含一些固定的信息（术语叫字段）。CORS作为新的 W3C 标准，在HTTP头部添加了一些字段，用来让被访问的服务器声明哪些来源站有权限访问哪些资源。如下图“access-control”开头的字段

换句话说，其实不是要改浏览器或原页面，而是要从被请求的外部服务器入手。给被请求的服务器的响应头部（header）中添加一些信息，告诉浏览器这些资源文件可以被引用来源站点“安全”的使用，浏览器就会正常加载这些资源了，这样就不会发生跨域请求错误。

  location ~ .*\.(ttf|woff|woff2)?$ {
    add_header 'Access-Control-Allow-Origin' *;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE';
  }

这里图床的服务器是Nginx环境的，所以用编辑器打开被请求站点的网站配置文件，在配置文件中加入上面内容即可。

add_header 作用是为HTTP请求（响应）添加头部信息。其中"Access-Control-Allow-Credentials"这一项是用来让跨域请求携带Cookie信息的，如果去掉默认不会携带。

第一行是Nginx用来匹配对应的文件，括号中就是对应的资源文件的扩展名（例如：ttf），有多个就用“|”符合分开。

这里没有包含图片和其他类型媒体，是因为并没有为这些文件加入CORS的头部内容，而且分开放在防盗链的部分了。

修改后需要重新加载载配置文件