Nginx(5) 配置Ajax跨域访问

最新推荐文章于 2024-08-20 09:03:14 发布

淘气的高老板

最新推荐文章于 2024-08-20 09:03:14 发布

阅读量8.6k

点赞数

分类专栏： http 分布式 nginx 网络故障配置文章标签：网络编程 http协议 ajax nginx redirect

本文链接：https://blog.csdn.net/kkgbn/article/details/52276866

版权

配置同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

故障

19 篇文章 0 订阅

订阅专栏

网络

15 篇文章 1 订阅

订阅专栏

配置nginx跨域访问的好处是可以不修改后端代码

nginx只要在返回头添加几个header即可

add_header 'Access-Control-Allow-Headers' 'Content-Type';
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET';

具体nginx.conf的配置：

	upstream gao.com{
		server 192.168.4.199:8084 weight=1;
		server 192.168.4.199:8085 weight=1;
		server 127.0.0.1:8084 weight=1;
	}
    server {
        listen       80;
        server_name  localhost;
        location / {
            proxy_pass http://gao.com;
            proxy_redirect default;
			proxy_connect_timeout 1s;
			proxy_read_timeout 1s;
			proxy_send_timeout 1s;
			add_header 'Access-Control-Allow-Headers' 'Content-Type';
			add_header 'Access-Control-Allow-Origin' '*';
			add_header 'Access-Control-Allow-Methods' 'GET';
        }

后端测试代码：

@RestController
public class RedisController implements CommandLineRunner {
	@RequestMapping("/test")
	public Object test(String name, String no, HttpServletRequest req) {
		String sid = req.getSession().getId();
		return String.valueOf(i) + System.getProperty("user.dir") + o.name+",sessionid="+sid;
	}
}

前端测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>测试ajax和跨域访问</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        type: "POST",
       /*  dataType: 'json', */
        url: "http://192.168.4.200/redis/test",
        data: {
            openid: "testajax",
            sign: "testsign"
        },
        success: function(data) { 
        	console.log(data)
        	$('.detial_f').show().html(data);
        },
        error: function() {
            alert("fail!!!,请刷新再试!");
        }
    });
});
</script>
<body>
	<div class="button_control">
		<button onClick ="getpara()" class="button_start">按钮</button>
	</div>
	<div class="test">
		<p class="detial_f"></p>
	</div>
</body>
</html>

测试结果：