架构师

您现在的位置是:首页 > 技术博客 > 开发环境

开发环境

Nginx如何实现跨域请求?

架构师小跟班 2019-08-14 开发环境
使用nginx实现浏览器跨域请求啥是跨域?假如你是百度开发人员, 在百度页面去请求谷歌的资源, 算不算跨域?跨域是指一个域名的网页去请求另一个域名的资源. 只要协议, 域名,

使用nginx实现浏览器跨域请求

啥是跨域?

假如你是百度开发人员, 在百度页面去请求谷歌的资源, 算不算跨域?

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

重现跨域问题

新建两个项目

一个用来提供数据, 一个用来访问数据

server: 提供数据, 8081端口

建一个项目 : server, 在其中加入一个控制器, 提供数据

我只贴一些主要代码了.

@RestController
@RequestMapping("data")
public class DataController {
    @RequestMapping("get")
    public List<Book> get() {
        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>

发布到本地tomcat中

1. 将webapps拷贝两份, 分别命名为 webappsclient, webappsserver

将发布获取到的解压文件夹, 分别放进去.

2. 修改tomcat配置文件,在server.xml文件中, 加入两个节点

3. 启动tomcat, 验证访问结果

别急, 按下 f12 看看

报错, 不给数据给我.

解决跨域问题

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

2. 修改ajax访问地址, 别的不需要动

3. 查看访问结果

这里的ip是nginx服务器的ip

这才是我需要的数据.

接下来看一下, 发送出去的请求是啥样的.

从地址上看, 并没有访问别的地址资源, 那么浏览器, 就认为, 没有跨域, 是同源的. 事实上, nginx通过反向代理, 将请求转发给 8081 了. 就这么的, 骗过了浏览器.

文章评论