首页 > 系统相关 >ajax完美解决跨域问题(jsonp、nginx反向代理)

ajax完美解决跨域问题(jsonp、nginx反向代理)

时间:2023-08-25 11:38:59浏览次数:55  
标签:http 跨域 nginx ajax proxy jsonp uc


做过web前端人都知道,经常会有ajax跨域问题,下面列举我经常使用的解决办法


第一种:使用jsonp,jquery的ajax方法支持jsonp,但是最大的缺点就是只支持get方式,而且服务端也要修改

客户端 test.html代码

<!DOCTYPE html>
<html>
<head>
	<title>工作端</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta charset="utf-8">
	<script src="jquery-1.10.2.min.js"></script>
	<style>
	</style>
</head>

<body>
<input type="button" value="测试" id="demo">
<div id="result">

</div>
<script>
$(document).ready(function() {
	var cache = {};
	$("#demo").click(function(){
		$.ajax({
			type : "get", 
			async:false,
			data:{"name":"test001","age":"100"},
			url : "http://192.168.10.111/server.php", //跨域请求的URL
			dataType : "jsonp",
			//传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)
			jsonp: "callback",
			//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
			jsonpCallback:"success_jsonpCallback",
				//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
			success : function(json){ 
				alert(json,name);
			}
		});
	});
})
</script>
</body>
</html>



server.php代码

<?php
$arr['id']=100;
$arr['name']="小网";
$data[]=$arr;
$arr['id']=200;
$arr['name']="阿里";
$data[]=$arr;
$data=json_encode($data);
$callback = $_GET['jsoncallback'];
echo $callback."(" .$data.")";





第二种:nginx反向代理,我的nginx版本nginx-1.10.0

首先在 conf\apiserver-reverse-proxy-conf\bingli\main.conf ,没有相关目录和文件就新建

location ~* ^/uc/.*{
	proxy_set_header Host $host;
	proxy_set_header X-Real-Ip $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_pass http://192.168.10.111:8080;
}



然后在nginx主配置文件添加加粗内容,即把代理文件加载进来


location / {
            root   html;
            index  index.html index.htm;
        }
include apiserver-reverse-proxy-conf/bingli/main.conf;



重启nginx,之后ajax发请求到

http://localhost/uc/aa http://localhost/uc/bb?token=xxxx
都会被转发到
http://192.168.10.111:8080/uc/aa
http://192.168.10.111:8080/uc/bb?token=xxxx


标签:http,跨域,nginx,ajax,proxy,jsonp,uc
From: https://blog.51cto.com/u_2148212/7227986

相关文章

  • 解决Nginx SSL 代理 Tomcat 获取 Scheme 总是 Http 问题
    背景公司之前用的是http,但是出于苹果app审核和服务器安全性问题,要改为https,我们公司用的是沃通的ssl,按照沃通的官方文档提供的步骤完成服务器的配置。架构上使用了Nginx+tomcat集群,且nginx下配置了SSL,tomcat没有配置SSL,项目使用https协议。原因配置成功后明明是https......
  • IDEA 生成的 JAVA 接口允许跨域访问的配置
    1.新建一个基类,在类上方添加 @CrossOrigin属性importorg.springframework.web.bind.annotation.CrossOrigin;@CrossOriginpublicclassBaseController{}2.在其他controller中继承这个基类,其他接口就可以跨域访问了publicclassElseControllerextendsBaseContr......
  • CentOS7.9搭建开发环境(Java、MySQL、Nginx、Redis)
    系统使用的阿里云CentOS7.964位SCC版。先安装个文件上传下载工具lrzsz,xshell登录终端,运行下面的命令:yuminstall-ylszrz 这是因为yum源的问题,需要修改yum配置。执行以下命令:cd/etc/yum.repos.dmvCentOS-Base.repoCentOS-Base.repo.backupwgethttp://mirrors.......
  • filebeat 配置采集nginx 日志
    filebeat配置nginx日志采集filebeat采集需求1.需要将以往30天的日志输出到es,并且以时间按天展示2.将不同的时间字段解析出来,输出到esnginx配置json日志log_formatlog_json'{"remoteAddr":"$clientRealIp",''"date_timeLocal":"$time_local",......
  • Linux之Shell脚本与Nginx
    1.入门Shell脚本1.1HelloWord打开我们的finalshell软件连接虚拟机在/usr/local/下创建一个点后缀为test的文件且编辑文件文件头部固定语句必须输入#!/bin/bash随后在下面我们直接输出一句Helloword按下ESC键且输入:wq保存退出后,这时不能直接执行,因为这个时候的文件你......
  • Nginx内置lua版OpenResty拦截转发请求Redis等操作
    Nginx内置lua版OpenResty拦截转发请求Redis等操作1下载并安装OpenRestyhttp://openresty.org/cn/download.html2下载lua-resty-http-0.17.1库以让openresty的lua支持外部http访问能力lua-resty-http-0.17.11下载lua-resty-http-0.17.12然后将文件中lua-resty-http......
  • Nginx-配置WebSocket反向代理
    客户环境因开放端口有限,部署Portainer后默认端口无法访问,故使用nginx做转发,按照正常http协议配置nginx,启动后发现portainer默认的进入容器的功能无法使用,排查后发现报错如下。错误信息为websocket连接问题,需要更改nginx配置为websocket。仅修改http块中的内容即可。map$http_......
  • Nginx-配置https证书
    一、说明在有些项目中需要帮客户配置https证书,如果你的服务使用Nginx作为静态服务器并且做为了端口转发,那么可以直接在Nginx中配置https证书证书有好几种格式,不同的格式对应不同server的配置,这里主要使用的是pem/key格式的证书,即公钥私钥文件对(必须要配对,否则无法使用)二......
  • Docker 安装 Nginx 教程
    Docker安装1.拉取镜像PSC:\Users\Administrator>dockerpullnginx2.创建挂载目录PSC:\Users\Administrator>mkdir-p/docker/nginx/confPSC:\Users\Administrator>mkdir-p/docker/nginx/logsPSC:\Users\Administrator>mkdir-p/docker/nginx/con......
  • 解密Nginx的高性能魔法:事件驱动与异步非阻塞模型
    在现代的Web服务架构中,Nginx已成为不可或缺的一部分,以其出色的性能和高效的事件驱动异步非阻塞模型而闻名。本文将深入探讨Nginx的工作原理,重点介绍其事件驱动与异步非阻塞模型,以及如何利用这些特性来实现高性能的后端服务。Nginx的事件驱动与异步非阻塞模型事件驱动模型Nginx使用......