nginx解决跨域

NSPLK • 2025-04-23 18:08 • 编程

一、跨域是什么

跨域，顾名思义就是访问不同域名的资源。同源策略指的是，只有协议、域名、端口都相同的两个页面才能进行数据交互。而跨域产生的原因就是由于浏览器的同源策略限制了网页从一个域访问另一个域的资源，所以跨域就成为了一个问题。

二、跨域表现形式

跨域有多种表现形式，例如Ajax跨域读取数据、JSONP、Web消息推送以及跨域资源共享(CORS)等。

其中，Ajax跨域读取数据指的是在浏览器端使用Ajax请求获取不同域名的资源；JSONP是一种通过动态创建标签实现跨域的方式；Web消息推送是一项HTML5规范，可以允许网页通过跨域方式推送消息；而CORS则是一种新型的跨域解决方案。

三、nginx解决跨域

当然，在众多的跨域解决方案中，nginx也可以作为一种跨域解决方式。以下是一些使用nginx进行跨域解决的方法：

四、使用proxy_pass

location /api/ {
    proxy_pass http://api.example.com/;
    add_header 'Access-Control-Allow-Origin' '*';
}

使用proxy_pass可以直接指定一个目标地址，可以在访问一个接口时候，直接由Nginx代理到另一个端口或另一个域名。

五、使用add_header

location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    proxy_pass http://api.example.com/;
}

在使用proxy_pass的同一时刻，可以通过使用add_header，设置Access-Control-Allow-Origin，来达到跨域的效果。这样可以在客户端直接使用ajax等方式请求数据，而不必担心跨域问题。

六、使用lua脚本

location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
        return 204;
    }
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
    proxy_pass http://api.example.com/;
}

除了使用proxy_pass和add_header外，还可以使用lua脚本来进行跨域解决。在nginx.conf的http段内加上以下代码：

http {
    lua_shared_dict cors 1M;
    init_by_lua_block {
        local cors = require "cors"
        cors.init()
    }
}

这段代码声明了一个共享内存，然后通过调用cors.lua文件里对应的方法来解决跨域问题。

七、总结

通过上述出现的几个方法，我们可以看出，nginx作为一种跨域解决方案采用起来非常灵活。提供了多种方式来解决跨域问题，使得我们能够根据自己的需要进行选择。无论是通过proxy_pass、add_header、还是使用lua脚本，都可以轻松的达到跨域解决的目的。

原创文章，作者：NSPLK，如若转载，请注明出处：https://www.506064.com/n/371631.html