搭建nginx代理支持前端页面跨域调用接口
前端同学因开发需要,本地搭建的服务需要调用其它域名的接口,在帮助正确配置后,已能正常使用。
这里写一篇博客,记录一下。
前端页面地址为127.0.0.1:9813/a.html
接口地址http://test.cas.com/news/auth
让前端在他自己电脑安装好nginx后,在nginx.conf文件加入下面配置:
server{
#任意一不在使用中的端口都行
listen 3389;
server_name localhost;
#/表示所有请求www.l.com都会进入如下处理
location / {
#所有请求localhost:3389都会被转发给test.cas.com域名下
proxy_pass http://test.cas.com/;
#以下配置是允许代理服务允许跨域
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
hosts文件新增绑定: 127.0.0.1 localhost
前端页面代码示例:
<html>
<body>
<h2>Index</h2>
<div id="show"></div>
<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(function () {
//代理服务会自动把参数转发给test.cas.com域名下
$.get("http://localhost:3389/news/auth?callback=jQuery31109208535942584586_1499060137214&newsTypeId=100", {}, function (result) {
$("#show").html(result);
})
})
</script>
</body>
</html>