纯静态ajax 跨域请求nginx解决方案

最新推荐文章于 2024-03-07 18:14:24 发布

原创最新推荐文章于 2024-03-07 18:14:24 发布 · 1.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#json #javascript #nginx

js 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一种使用Nginx作为代理服务器解决前端HTML页面通过jQuery AJAX请求后端接口时遇到的跨域问题的方法。通过配置Nginx实现本地静态资源与后端API在同一端口下共存，并设置跨域响应头。

1、写这篇主要帮新手前端闭坑下。

2、纯html页面引入jquery 的ajax访问后端接口时难免跨域，要配置那些七七八八，而且后端还不一定配合。

解决方案

1、去下nginx。其实window安装nginx很简单的，去下个第三方集成环境，博主用的UPUPW ANK，自行百度。免费的。下一步下一步就安装完了。然后打开面板，

这边有一个nginx，先别急着点。

1、右键属性找到安装目录，右上角搜索搜nginx ,用编辑器打开nginx.conf

配置如下，记住 ,你的静态html文件和接口/media要放在同个端口下。

server {
			listen       8050;
			server_name  localhost;
			add_header Access-Control-Allow-Origin *;  # 允许跨域
			#charset koi8-r;
			#access_log  logs/host.access.log  main;
			location / {
				root   E:/work/web/;#静态html项目的地址
				index  index.html index.htm index.php;
				 autoindex  off;
			}
			location /media/ {
				add_header 'Access-Control-Allow-Origin' '*';
				add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
				add_header 'Access-Control-Allow-Headers' '*';
				add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
				proxy_pass http://192.168.100.30:8082;
			}
		}

然后你就可以访问localhost:8050直接访问静态页和请求了

$.ajax({
		url:"http://localhost:8050/media/ad/plan/list?isReceive=1",
		type:"get",
		data:{
			
		},
		success:function(res){
			debugger
		},
		error:function(err){
			debugger
		}
	})