问题描述

1、首先让我们先看一张图

2、从图中，我们可以很清楚的看到当http请求的站点访问https的资源的时候会报出“Cross-Origin”跨域的问题。为什么会出现这样的错误，这是因为涉及到“同源策略”的问题。。。blablabla……

3、下面依次说如何解决这个问题

问题解决

1、我们再来看一下报错信息，报错信息中有一段写明“Access-Control-Allow-Origin”header的字样，我们可以由此看出会不会在服务端add header即可呢？

2、顺着这个思路，在nginx配置中加入了这样一句：

      add_header 'Access-Control-Allow-Origin' '*';

      如图所示：

3、重启之后，其他内容好了（例如，css文件等）发现字体（font）文件还是有问题的，如图所示：

这是为什么……！字体文件的Context-Type却是”text/html"！！！而且还没有像别的东东那样的  Access-Control-Allow-Origin:*

4、于是乎，继续增加了这样一句（如图所示），指定eot、ttf、woff字体文件 强制加入header信息

5、觉得这样万事大吉 就错了、错了、错了……重要的事情说三遍（这个地方是个巨坑、当时就是在下面要说的地方浪费了好长时间，不过最后还是解决了，不墨迹了，我们继续……）

6、突然发现，哦，是不是因为我没加mime.types呢？（这个必须要加的，因为它决定文件的Content-Type）这个应该早点想起来的……blablabla…… 赶紧加上 回来再看……

于是乎加了三行：

application/x-font-woff woff woff2; 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：如何搞定前端资源服务跨域问题之nginx篇

关键词：前端