九种跨域方案解决(偏后台)

最新推荐文章于 2020-04-24 16:21:04 发布
最新推荐文章于 2020-04-24 16:21:04 发布
阅读量160 收藏
点赞数
分类专栏： important
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lemontree_fu/article/details/104027334
版权

同源策略：协议、域名和端口号都一致叫同域

为什么浏览器不支持跨域呢？

  • cookie localstorage等等不支持跨域
  • dom元素也有同源策略，比如iframe
  • ajax不支持跨越

实现跨域：

  • jsonp
  • cors
  • postMessage
  • document.domain
  • window.name
  • location.hash
  • http-proxy
  • nginx
  • websocket

1 jsonp

<script type="text/javascript">
			//1jsonp
			// 缺点：只能发送get请求，不支持post put delete，不安全
			function jsonp({url,params,cb}){
				return new Promise((resolve,reject)=>{
					window[cb]=function(data){
						resolve(data);
						document.body.remove(script);
					}
					params={...params,cb}
					let arrs=[];
					for(let key in params){
						arrs.push(`${key}=${params[key]}`)
					}
					let script=document.createElement('script');
					script.src=`${url}?${arrs.join('&')}`;
					document.body.appendChild(script);
				})
			}
			jsonp({
				url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
				params:{
					wd:'b'
				},
				cb:'show'
			})
			.then(res=>{
				console.log(res)
			})
			.catch(err=>{
				console.log(err)
			})
		</script>

 

2 cors

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//2cors
			let xhr=new XMLHttpRequest;
			document.cookie="name=afpx";
			// 强制带好凭证再发送请求
			xhr.withCredentials=true;
			xhr.open('PUT','http://localhost:4000/getData',true);
			xhr.setRequestHeader('name','afpx')
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4){
					if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
						console.log(xhr.response)
					}
				}
			}
			xhr.send();
		</script>
	</body>
</html>

server.js

let express=require('express');
let app=express();

app.use(express.static(__dirname));
app.listen(3000);

server2.js

let express=require('express');
let app=express();
let whiteList=['http://localhost:3000']
app.use(function(req,res,next){
	let origin=req.headers.origin;
	if(whiteList.includes(origin)){
		// 设置哪个源可以访问
		res.setHeader('Access-Control-Allow-Origin',origin)
		// 设置加请求头
		res.setHeader('Access-Control-Allow-Headers','name')
		// 添加请求方法
		res.setHeader('Access-Control-Allow-Methods','PUT')
		// 预检的存活时间
		res.setHeader('Access-Control-Max-Age',6000)
               // 允许前端获取哪个头
		res.setHeader('Access-Control-Expose-Headers','name')
		if(req.method=='OPTIONS'){
			res.end();//OPTIONS请求不做任何处理
		}
	}
	next();
})
app.get('/getData',function(req,res){
	console.log(req.headers);
	res.end('hahaha')
})
app.put('/getData',function(req,res){
	console.log(req.headers);
	res.end('hahaha')
})
app.use(express.static(__dirname));
app.listen(4000);

 

3 postMessage

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe 
		  src="http://localhost:4000/index2.html"
		  id="iframe"
		  onload="load()">
		</iframe>
		<script type="text/javascript">
			//3
			function load(){
				let frame=document.getElementById('iframe');
				frame.contentWindow.postMessage('我爱你','http://localhost:4000')
				window.onmessage=function(e){
					console.log(e.data)
				}
			}
		</script>
	</body>
</html>

index2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.onmessage=function(e){
				console.log(e.data)
				e.source.postMessage('我不爱你',e.origin);
			}
		</script>
	</body>
</html>

server.js

let express=require('express');
let app=express();

app.use(express.static(__dirname));
app.listen(3000);

server2.js

let express=require('express');
let app=express();

app.use(express.static(__dirname));
app.listen(4000);

 

4 window.name

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- index和index2是同域的,http://localhost:3000
		index3是独立的,http://localhost:4000
		index获取index3的数据	
		index先引用index3 index3把值放到window.name 把index引用的地址改到index2 -->
		<iframe 
		  src="http://localhost:4000/index3.html"
		  id="iframe"
		  onload="load()">
		</iframe>
		<script type="text/javascript">
			let first=true;
			function load(){
				if(first){
					let iframe=document.getElementById('iframe');
					iframe.src="http://localhost:3000/index2.html"
					first=false;
				}else{
					console.log(iframe.contentWindow.name)
				}
				
			}
		</script>
	</body>
</html>

index2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
		</script>
	</body>
</html>

index3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			window.name="我不爱你"
		</script>
	</body>
</html>

server.js

let express=require('express');
let app=express();

app.use(express.static(__dirname));
app.listen(3000);

server2.js

let express=require('express');
let app=express();

app.use(express.static(__dirname));
app.listen(4000);

5 location.hash

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 路径后面的hash值可以用来通信 -->
		<!-- 目的：index想访问index3
		index给index3传一个hash值，
		index3收到hash值后
		index3把hash值传递给index2
		index2将结果放到index的hash值中 -->
		<iframe 
		  src="http://localhost:4000/index3.html#iloveyou"
		  id="iframe">
		</iframe>
		<script type="text/javascript">
			window.onhashchange=function(){
				console.log(location.hash)
			}
		</script>
	</body>
</html>

index2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.parent.parent.location.hash=location.hash;
		</script>
	</body>
</html>

index3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			console.log(window.location.hash)
			let iframe=document.createElement('iframe');
			iframe.src="http://localhost:3000/index2.html#idontloveyou"
			document.body.appendChild(iframe);
		</script>
	</body>
</html>

6 document.domain

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		helloa
		<!-- 限制：必须是一级域名和二级域名的关系，并且配置 -->
		<!-- 一级域名 www.baidu.com -->
		<!-- 二级域名 viode.baidu.com -->
		<!-- index是通过http://localhost:3000/index.html -->
		<iframe 
		  src="http://localhost:3000/index2.html"
		  id="iframe"
		  onload="load()">
		</iframe>
		<script type="text/javascript">
			document.domain="zf1.cn"
			function load(){
				var iframe=document.getElementById('iframe')
				console.log(iframe.contentWindow.a);
			}
		</script>
	</body>
</html>

index2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		hellob
		<script type="text/javascript">
			document.domain="zf1.cn"
			var a=100;
		</script>
	</body>
</html>

7 websocket

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 高级api 不兼容 socket.io(一般使用它)
			let socket=new WebSocket('ws://localhost:3000');
			socket.onopen=function(){
				socket.send('我爱你');
			}
			socket.onmessage=function(e){
				console.log(e)
			}
		</script>
	</body>
</html>

server.js

let express=require('express');
let app=express();
let WebSocket=require('ws');
let wss=new WebSocket.Server({port:3000});
wss.on('connection',function(ws){
	ws.on('message',function(data){
		console.log(data)
		ws.send('我不爱你')
	})
});

8 nginx

先下载nginx，然后配置

9 http-proxy

以后再学

 

 

 

 

水蜜桃那么甜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
几种常见跨域解决方案
江夏、的博客
05-12 1446
一、同源策略 现在很多的项目开发，都实现了前后端分离开发，能够大大提高效率，但是导致前端向后端发送请求，会出现跨域错误。 先说说什么是跨域当访问一个网站时，一个完整的域名由传输协议、网络名、域名主体和域名后缀四个部分组成，如下图所示： 相同后缀的域名主体是不能重复。http://www.baidu.com和http://www.google.cn就是两个不同的域。跨域就是在当前域去访问其他域的资源。就比如我们在自己的机器上通过ajax去调用百度地图提供的API接口数据，这就是跨域请求。 <!DOCT
解决跨域的九种方法
Conradine_Lian的博客
07-10 291
同源策略请求：同源是浏览器的概念，指 协议，域名，端口号相同。 ajax（异步无刷新） / fetch 前后端分离导致跨域（非同源策略请求） 前端：web服务器，请求资源文件 , 资源服务器：图片，音视频 后端：数据服务器，处理业务逻辑和数据接口 一、jsonp 原理：基于script 标签 src属性 ，发送请求时，把本地函数作为回调函数传递给服务器，服务端接收并返回处理完成的数据，浏览器接收到响应数据，执行该函数。 前端： <script> // 全局函数func functi.
javaWeb后台配置跨域的方法
热门推荐
燃烧杯的博客
01-24 1万+
本文给出几种java后端配置跨域的方法，在tomcat7和8上测试通过.
webpack打包工具用法
Lemontree_fu的博客
01-16 140
1 webpack的基础知识 webpack是一个前端资源加载/打包工具，将根据模块的依赖关系进行静态分析，并依据规则生成对应的静态资源。 安装：先安装nodex.js，再安装npm install webpack -g 然后再npm install webpack-cli -g 检查版本webpack -v 2 打包一个js到另外一个js webpack sh...
HTTP访问控制(CORS)
FY19951211的博客
10-20 2311
跨站 HTTP 请求(Cross-site HTTP request)是指发起请求的资源所在域不同于该请求所指向资源所在的域的HTTP请求。比如说，域名A(http://domaina.example)的某 Web 应用程序中通过<img>标签引入了域名B(http://domainb.foo)站点的某图片资源(http://domainb.foo/image.jpg)，...
跨域之CORS 的后台配置
weixin_33859844的博客
06-21 2367
#如果服务端是 Nginx 的以参考# Acts as a nginx HTTPS proxy server# enabling CORS only to domains matched by regex # /https?://.*\.mckinsey\.com(:[0-9]+)?)/## Based on: # * http://blog.themillhousegroup.com/2013/...
后台解决跨域问题的几种方式
Asa_Prince的博客
05-23 3922
一、Spring跨域拦截注解方式配置 1、spring版本至少在4.2以上，本人使用的是4.3 2、跨区没配置之前请求访问会报错 请求方式： 当前域地址：http://192.168.1.78:9080/testGit/ (index):1 Failed toload http://192.168.1.78:8800/bronzecoll/share/shareNews?id=1: N...
jQuery跨域问题解决方案
12-10
下面把具体解决方案介绍如下。 后台处理路径“/test”的函数： 代码如下: //路径处理 app.get(“/test”,user.test); //处理函数 exports.test=function(req,res){  res.end(“alert(‘JS跨域访问’)”); ...
详解SpringMVC解决跨域的两种方案
08-29
SpringMVC 跨域解决方案 ...本文介绍了 SpringMVC 跨域解决方案的两种方案，即通过注解的方式和通过配置文件的方式。通过这两种方案，可以解决跨站 HTTP 请求的问题，使得前后端分离的开发方式变得更加便捷和灵活。
Python项目跨域问题解决方案
12-17
由于浏览器的安全策略限制，不同源的资源之间不能自由通信，这就需要我们采取一些措施来解决Python项目的跨域问题。本篇文章将详细解释如何解决Python Django项目的跨域问题。 首先，我们来看第一个解决方案，通过`...
九种跨域方式实现原理
03-03
前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。...
Vue项目中跨域问题解决方案
01-19
后台更改header 使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-...
video标签的预加载
Lemontree_fu的博客
04-24 6949
预加载媒体文件 设置preload属性中的不同属性值，来告诉浏览器应该怎样加载一个媒体文件： auto：表示让浏览器自动下载整个文件 none：表示让浏览器不必预先下载文件 metadata：表示让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等） <video width="400" height="300" controls prel...
面试官常问的web前端问题
Lemontree_fu的博客
01-06 2251
1. 标签上 alt与 title属性的区别是什么？ alt ：搜索引擎识别，在图像无法显示时的替代文本； title ：元素注释信息，主要给用户解读。当鼠标放到文字或是图片上时有 title 文字显示。 （因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。 在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用...
在vue项目中 如何定义全局变量 全局函数 单个的css文件
Lemontree_fu的博客
09-04 2138
定义全局变量 第一种方式： 全局变量模块文件：global.vue Global.vue文件： <script> const serverSrc='www.baidu.com'; const token='12345678'; const hasEnter=false; const userSite="中国钓鱼岛"; export default { userSite,//...
try,catch,finally的用法
Lemontree_fu的博客
08-31 1834
try/catch/finally 语句用于处理代码中可能出现的错误信息。 错误可能是语法错误，通常是程序员造成的编码错误或错别字。也可能是拼写错误或语言中缺少的功能（可能由于浏览器差异） try语句允许我们定义在执行时进行错误测试的代码块。 catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。 finally 语句在 try 和 catch 之后无论有无异常都会执行。 注意...
h5页面调用百度地图获取当前位置并在地图上标注出来
Lemontree_fu的博客
09-04 1704
在项目中越来越多的用到了手机的GRS定位功能，使用百度地图API获取当前位置并在地图上标注出来首先应该在网站上注册key 在百度上搜索 百度地图开放平台，出来下面的网站，点击打开即可 点击获取密钥，注册获取key 下面就可以写代码了，这里就不用vue了。 <script type="text/javascript" src="http://api.map.baidu.com/api?v...
UI必备颜色表
Lemontree_fu的博客
08-30 1023
打开链接查看UI必备颜色表https://blog.csdn.net/weixin_43606158/article/details/97569176
问题！！！(随时更新)
Lemontree_fu的博客
08-23 812
如何在vue项目中使用md5.js及base64.js 一、在项目根目录下安装 npm install --save js-base64 npm install --save js-md5 二、在项目文件中引入 import md5 from 'js-md5'; let Base64 = require('js-base64').Base64; 三、在项目文件中使用 base64 Base64...
Ajax跨域解决方案：JSONP、CORS与代理请求
本文主要探讨了Ajax跨域问题及其解决方案，包括JSONP、CORS和代理请求三种方式，并介绍了如何分析和识别Ajax跨域问题。 ### 什么是Ajax跨域 Ajax跨域是由于浏览器的“同源策略”限制，使得JavaScript在发送Ajax请求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值