## 跨域问题

跨域问题：

1、什么是跨域

• 浏览器从一个域名的网页去请求/访问另一个域名的资源时，域名，端口号、协议 任何一个不同，就会造成跨域。
  - 域名不同: 主域名 子域名
  - 主域名: http://www.baidu.com --> http://www.sina.com
  - 子域名: http://www.baidu.com --> http://news.baidu.com
  - 域名和域名ip http://www.baidu.com --> http://14.215.177.38/
  -端口号：
  http://127.0.0.1:3000 —>http://127.0.0.1:5000
  http://www.baidu.com:3000 —>http://www.baidu.com:8000
  -协议：
  http https file ftp(文本传输协议)

• 不跨域：
  - http://127.0.0.1:3000/index.html —> http://127.0.0.1:3000/login.html

######## 备注：前端只能解决部分跨域情况，端口号或协议不同时，只能通过后端解决

2、为什么会造成跨域？

• 同源策略：是浏览器的一个安全功能，不同源的客户端脚本，在没有明确授权前，是不可以去读取对方的资源。拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收到
• 不受同源策略限制：
  页面的链接，重定向，以及提交保单
  跨域资源的引入 但是js不能读取加载的内容

解决跨域

1、jsonp解决跨域：

•   			利用到script中的src，因为src不受同源约束的  可以解决get请求
  

•   			通过传递一个函数，后台得到函数，操作数据，在把数据通过函数返回
  

	<script src="http://127.0.0.1:3000/login?name=liming&callback=handleCallback" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function handleCallback(){
			
		}
		$.ajax({
			url:"http://127.0.0.1:3000/login",
			type:"GET",
			async:true,
			data:{
				name:username
			},
			dataType:"jsonp",
			jsonpCallback:"handleCallback",
			contentType:"application/x-www-form-urlencoded",
			success:res=>{
				console.log("res",res)
			},
			fail:err=>{
				console.log("err",err)
			}
		})
	</script>

2、服务端进行配置

• 设置响资源响应头

		router.all("/path",function(req,res,next)=>{}) // all所有方法
		router.all("*",function(req,res,next)=>{
			res.header("Access-Control-Allow-Credentials","true")
			res.header("Access-Control-Allow-Origin","*");//允许访问来源，这里表示所有
			res.header("Access-Control-Allow-Origin","http://127.0.0.1:5500");//允许访问来源，这里表示只有http://127.0.0.1:5500访问
			
			
		})  // * 所有的路径

3、Nginx反向代理

• 交个后端解决：

•   		http://www.baidu.com/index.html ---访问 -->  http://www.sina.com/server.php
  

•   		通过http://www.baidu.com/server.php  可以将数据发送给 http://www.baidu.com/index.html