nginx 解决跨域问题嵌入第三方页面

下面是关于“nginx 解决跨域问题嵌入第三方页面”的完整攻略。

一、什么是跨域问题

跨域问题（Cross-Origin Resource Sharing，简称为 CORS）是由浏览器的同源策略造成的。同源策略是指浏览器不能执行与当前页面不同源的脚本，否则将会报错。同源指的是域名、端口、协议都相同。

跨域问题通常表现为 js、css、iframe 等与不同源的资源无法正常加载，导致页面功能无法正常使用。

二、如何解决跨域问题

解决跨域问题可以通过后端设置响应头实现，在这里我们介绍一种通过 nginx 配置解决跨域问题的方法。

1. nginx 配置

在 nginx 的配置文件中，添加如下配置：

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

这里的意思是允许所有来源的请求并且允许客户端发送 POST 和 GET 方式请求，并且允许客户端在请求头中包含的字段有 Origin、X-Requested-With、Content-Type、Accept 和 Authorization。当客户端发送 OPTIONS 请求时，设置响应头并返回 204。

2. 示例说明

示例一

假设当前网站本身为域名 www.example.com，需要嵌入的第三方页面为域名 abc.com，且该页面中包含了请求网站 www.example.com 的数据。

在此情况下，首先需要在 www.example.com 上进行 nginx 配置，以允许 abc.com 请求数据。配置方法如上述 nginx 配置所述。

接下来，需要在 abc.com 页面中通过 JS 发起请求，代码如下：

const xhr = new XMLHttpRequest();

xhr.open('GET', 'http://www.example.com/data', true);

xhr.withCredentials = true;

xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(xhr.responseText);
  }
};

xhr.send(null);

在此代码中，我们使用了 XMLHttpRequest 对象发起跨域请求。其中 withCredentials 属性设置为 true，这个属性决定了跨域请求是否携带 cookie 等认证信息。

示例二

假设当前网站本身为域名 www.example.com，需要嵌入的第三方页面为域名 abc.com，且该页面通过 iframe 嵌入到了 www.example.com 中。

在此情况下，也需要在 www.example.com 上进行 nginx 配置，以允许 abc.com 嵌入到该网站中。配置方法如上述 nginx 配置所述。

接下来，在 www.example.com 的页面中使用以下代码嵌入到 abc.com 页面：

<iframe src="http://www.example.com/abc" width="100%" height="100%"></iframe>

在此代码中，src 的值为 abc.com 的页面地址，在 iframe 中使用该代码就可以将 abc.com 页面嵌入到 www.example.com 中。

以上就是通过 nginx 解决跨域问题嵌入第三方页面的完整攻略。