nginx报跨域怎么办？get还跨域？

Question

无论是ajax get请求，还是link方式：

<link rel="preload" as="font" crossorigin href="https://*****/***.ttf">

都发现报跨域，这是什么问题？

这台服务器换过IP，换IP后，导致服务器上某些程序异常，大部分都卸载重装了，nginx也重装了，以前也没遇到这种问题。
不知道是nginx缺少什么配置，还是换IP导致的服务器环境有问题了？
有没有大神知道如何解决？

Answer 1

你需要nginx配置一下跨域

location / {    # 允许跨域的请求，可以自定义变量$http_origin，*表示所有    add_header 'Access-Control-Allow-Origin' *;    # 允许携带cookie请求    add_header 'Access-Control-Allow-Credentials' 'true';    # 允许跨域请求的方法：GET,POST,OPTIONS,PUT    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT';    # 允许请求时携带的头部信息，*表示所有    add_header 'Access-Control-Allow-Headers' *;    # 允许发送按段获取资源的请求    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';    # 一定要有！！！否则Post请求无法进行跨域！    # 在发送Post跨域请求前，会以Options方式发送预检请求，服务器接受时才会正式请求    if ($request_method = 'OPTIONS') {        add_header 'Access-Control-Max-Age' 1728000;        add_header 'Content-Type' 'text/plain; charset=utf-8';        add_header 'Content-Length' 0;        # 对于Options方式的请求返回204，表示接受跨域请求        return 204;    }}

Answer 2

首先，要明确什么是"跨域"。在Web环境中，由于浏览器的同源策略，来自不同源的资源不能共享。这里的"同源"指的是协议、域名、端口完全相同。所以，当浏览器尝试获取其他源的资源时，就会发生"跨域"。

跨域问题常见于AJAX请求和HTML链接。对于AJAX请求，可以使用XMLHttpRequest的withCredentials属性来发送带有身份验证信息的请求，或者使用CORS（跨源资源共享）策略来允许跨域请求。

对于HTML链接，可以使用crossorigin属性来指定跨域策略。例如，你的代码：

<link rel="preload" as="font" crossorigin href="https://*****/***.ttf">

这里的crossorigin属性就是用来处理跨域问题的。如果这个属性没有指定，那么默认情况下，加载的资源会被限制在本源。也就是说，如果这个链接是在一个不是https://*****/***.ttf的源上加载的，那么它就不能加载这个字体。

现在的问题是，你的nginx报了跨域。这可能是因为nginx没有正确地配置CORS策略。你可以尝试在nginx的配置文件中添加以下内容：

location ~* \.(eot|ttf|woff|woff2)$ {    add_header Access-Control-Allow-Origin "*";    add_header Access-Control-Allow-Methods "GET";}

这段配置会允许所有来源的字体文件进行跨域请求。当然，你也可以将*替换为特定的源。

另外，你说服务器换过IP后出现了这个问题。这可能是因为一些设置或者配置在换IP的过程中被改变了。如果服务器上的应用程序有依赖于IP的硬编码，那么当IP改变时，这些应用程序可能会出问题。所以，如果可能的话，最好是在服务器换IP后，检查并更新所有硬编码的IP。

最后，如果以上方法都不能解决问题，那么可能需要进一步检查服务器的环境。可以尝试查看服务器的错误日志，或者尝试在不同的浏览器或者网络环境下测试这个问题，看看是否有所改善。