前端页面访问另外一个服务提供的后端api，就需要解决跨域的问题，必须要明白的一点是跨域的问题来自浏览器而非服务器。解决跨域的技术有好几种，例如jsonp, proxytable，设置响应消息头等，我们这一节将看一下如何利用nginx的反向代理完成跨域。
1、前提约束
- 安装nginx
https://www.jianshu.com/p/c8aa1a323e3a
假设nginx安装在D:\Program Files\nginx-1.14.0\ - 提供一个api http://localhost:8082/getdata
api请求及响应结果
注意：这个api的端口、名称读者可以根据自己的实际去设置；
2、操作步骤
- 创建一个web项目，假设名称为demo，端口为8080
- 在demo/webapp下引入jquery-1.10.2.js
- 在demo/webapp下创建indexcross.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>nginx cross</title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="data">
</div>
<script type="text/javascript">
$.get("http://localhost/getdata", function (data) {
$("#data").html(data.data);
});
</script>
</body>
</html>
- 修改D:\Program Files\nginx-1.14.0\conf\nginx.conf，在http->server节点下添加以下内容：
location /getdata
{
proxy_pass http://localhost:8082;
}
- 启动或者重启nginx
cd D:\Program Files\nginx-1.14.0
# 启动
nginx
# 重启
nginx -s reload
- 测试
在浏览器中访问http://localhost:8080/indexacross.html，便能看到获取到了8082端口下api的响应。
以上就是通过nginx完成跨域的过程。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
