Nginx实现跨域请求配置

最新推荐文章于 2025-02-06 12:49:25 发布

青铜造白

最新推荐文章于 2025-02-06 12:49:25 发布

阅读量713

点赞数

分类专栏： Nginx 文章标签： nginx nginx跨域

本文链接：https://blog.csdn.net/a898712940/article/details/115875940

版权

Nginx 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了跨域的概念，即不同协议、域名或端口之间的请求被视为跨域。接着展示了通过Nginx进行跨域配置的实践，重点在于`proxy_pass`属性的使用，用于将8082端口的请求代理到8081端口的服务，从而解决跨域问题。

摘要由CSDN通过智能技术生成

一：什么是跨域

跨域是指一个域名的网页去请求另一个域名的资源. 只要协议, 域名, 端口中, 有任何一个不同, 都是跨域。

二：代码

server端: 提供数据, 8081端口

@RestController
@RequestMapping("/data/")
public class DataController {
    @RequestMapping("getList")
    public List<Book> getList() {
        List<Book> list = new ArrayList<>();
        list.add(new Book("海底两万里", 3000L));
        list.add(new Book("三体", 1000L));
        list.add(new Book("大鲸鱼", 2000L));
        list.add(new Book("是什么限制了我们的想象力", 4000L));
        return list;
    }
}

client端: 访问数据, 8082端口

<html>
<body>
<h2>Hello World! client</h2>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(function () {
        console.log("ajax start ...");
        $.ajax({
            url: 'http://localhost:8081/server/data/get',
            type: 'get',
            success: function (data) {
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            }
        });
    });
</script>
</body>
</html>

三：nginx跨域配置

关键属性：proxy_pass http://ip:8081/data/getList

修改nginx配置文件, 反向代理这两个服务. 然后启动nginx服务