学习笔记四:前端解决跨域的三种方式

跨域未处理时,错误信息
跨域未处理时,错误信息

一、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面URL被请求的页面URL是否跨域原因
http://www.test.com/http://www.test.com/index.html同源(协议、域名、端口号相同)
http://www.test.com/https://www.test.com/index.html协议不同(http/https)
http://www.test.com/http://www.baidu.com主域名不同(test/baidu)
http://www.test.com/http://blog.test.com/子域名不同(www/blog)
http://www.test.com/http://www.test.com:7001/端口号不同(8080/7001)
http://localhost:3000http://127.0.0.1:3000本机访问IP地址不同(localhost/127.0.0.1)

二、为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略是Web的一种安全约定,浏览器的同源策略只是对其的一种实现。浏览器同源策略将认为任何站点装载的内容都是不安全的。所以会对跨域的操作或者请求进行限制,从而让用户安全的上网。

同源 指的是 域名、 协议、 端口 相同。
若有其中一个不同,浏览器将会认为非同源,也就是跨域。

三、解决方法

1.CORS 跨域资源共享

CORS的原理是:使用 http自定义头部 ,请求头附带客户端信息,服务端验证,并且返回响应头告诉客户端是否允许访问。
当我们需要使用CORS的时候,只需要由服务端改动,前端不需要改动。
客户端请求分为简单请求非简单请求
只要满足以下条件的请求,就属于简单请求

  1. 请求方法为HEAD、GET或者POST中的一种
  2. HTTP的头信息不超过以下几种字段Accept、Accept-Language、Content-Language、Last-Event-ID以及Content-Type的值只限于application/x-www-form-urlencoded、multipart/form-data、text/plain三个

对于简单请求来说,从浏览器发出请求的时候,浏览器会自动在请求头中添加一个字段Origin,值为发出请求网页的源地址
在这里插入图片描述
服务端根据这个值,决定是否同意这次请求,如果Origin的值不在指定的许可范围,服务端返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段,就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。 如果Access-Control-Allow-Origin字段正好跟带过去的Origin的值一样,则返回对应的数据,完成一次请求。

非简单请求以及option请求

非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。

在进行非简单请求之前,浏览器会在正式请求之前发送一次预检请求option,这就是有时候我们会在控制台中看到的option请求,就是说,正式请求之前,浏览器会去问服务端我这个地址能不能访问你,如果可以,浏览器才会发送正式的请求,否则报错。

简单请求示例:

  • 客户端
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    $.ajax({
      url:"http://localhost:3000",
      type:"get",
      success:function(weather){
        document.write(`今日天气:${weather}`)
      }
    })
  </script>
</body>
</html>
  • 服务器端
const http=require("http");
http.createServer((req,res)=>{
  var weather="郑州 真球热 14~1";
  res.writeHead(200,{
    "Content-Type":"text/plain;charset=utf-8",
    "Access-Control-Allow-Origin":"http://127.0.0.1:5500" //响应头增加信息
  })
  res.write(weather);
  res.end();
}).listen(3000);

复杂请求
相比简单请求,服务器端代码要添加头部,在服务端返回头部告诉浏览器说我们支持PUT方法

const http=require("http");
http.createServer((req,res)=>{
  var weather="郑州 真球热 14~1";
  res.writeHead(200,{
    "Content-Type":"text/plain;charset=utf-8",
    "Access-Control-Allow-Origin":"http://127.0.0.1:5500",
    "Access-Control-Allow-Methods":"PUT,DELETE"
  })
  res.write(weather);
  res.end();
}).listen(3000);

2.JSONP 跨域解决
在浏览器中,我们可以使用script标签来加载js脚本,如果使用过cdn的童鞋应该知道,我们可以直接填写不同源的地址,因为浏览器允许script加载跨域资源。我们可以通过该标签来加载动态脚本,但是需要服务端调整数据结构。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="http://localhost:3000">
    //因为script的特点就是,接收到一段js代码,立刻执行!
    //而现在的服务器端返回的,刚好是一段js语句。
    //所以,script收到服务器端返回的js语句后,就会立刻执行!
  </script>
</body>
</html>

const http=require("http");
http.createServer((req,res)=>{
  var weather="北京 大风 14~1";
  res.writeHead(200,{
    "Content-Type":"text/plain;charset=utf-8"
  });
  res.write(`document.write('${weather}')`);
  res.end();
}).listen(3000);

  • 优点: 服务器端不需要知道任何和客户端相关的地址或域名信息。意为着,任何客户端都可以跨域请求这个服务器端。
  • 问题: 如果把js语句在服务器端写死,则如果多个客户端希望在接到数据后执行不同的操作!则再次众口难调!
  • 解决:
  •  1). 服务器端: js语句不再写任何实质的操作内容。而是改为一条普通的函数调用语句! 		
    
  •  2). 客户端网页中: 再额外定义一个同名的函数,定义一个形参。在客户端同名函数定义中,可对收到的实参值数据做任何想要的操作,而不必受服务器端限制。
    
<body>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    function doit(weather){
      document.write(`今日天气:${weather}`)
      // alert(`今日天气:${weather}`);
      //console.log(`今日天气:${weather}`)
    }
    //fun('北京 大风 14~1')
  </script>
  <script src="http://localhost:3000?callback=doit">
    //收到: fun('北京 大风 14~1')
    //因为script的特点就是,接收到一段js代码,立刻执行!
    //而现在的服务器端返回的,刚好是一段js语句。
    //所以,script收到服务器端返回的js语句后,就会立刻执行!
  </script>
</body>
const http=require("http");
http.createServer((req,res)=>{
  var callback=req.url.split("=")[1];
  var weather="北京 大风 14~1";
  res.writeHead(200,{
    "Content-Type":"text/plain;charset=utf-8"
  });
  res.write(`${callback}('${weather}')`);
  res.end();
}).listen(3000);

**3.服务器代理(http-proxy代理跨域)

代理服务器,跨域问题是浏览器的同源策略限制,服务器之间是没有的,那我们先把请求给我们的代理服务器,再让我们的代理服务器去调用这个接口,在发送给前端就可以了。不能和其它跨域方式并存。

  • 利用vue 脚手架中自带的 http-proxy 代理程序进行跨域
  • 在vue 脚手架中配置文件(vue.config.js),添加一个新的配置项
// vue.config.js
module.exports = {
	devServer:{
		proxy:{
			//为所有的服务器接口起一个别名前缀,为了和vue脚手架中其他页面的路由地址区分
			'/api':{
				target:'http://localhost:3000/'//自己的服务器端口3000
				changeOrigin:true //打开跨域
				pathRewrite:{
					"^/api":""
					//因为真实的服务器端的地址中不包含/api ,所以应该将程序中的/api删除(替换空字符串),再和target中的基础路径拼接起来作为发送到服务器端的最终请求地址
				}
			}
		}
	}
}
//main.js
axios.defalts.baseURL = "/api"
// 然后重启脚手架(记得打开服务器)

在main.js中,axios的baseURL就不能写真实的服务器地址,应该写devServer中定义的所有服务器端地址的别名前缀:

 axios.defaults.baseURL="/api"

在组件内使用axios发送请求时,依然使用接口的相对地址就可以:

this.axios.get("/index")

原理:

this.axios.get("/index")  
	↓axios会将baseURL和"/index"拼接
this.axios.get("/api/index")
所有↓带有/api前缀的路径都会交给devServer程序处理
  devServer —— 不使用ajax,也能发送http请求的程序
	↓先将相对路径中的/api去掉
   /index
    ↓再和提前配置好的服务器地址target拼接
http://localhost:5050/index
	↓向真实的服务器接口地址发送请求
  devServer接到响应结果
	↓
  返回给axios.then(result=>{})继续处理
整个过程因为没有用到ajax,所以不受浏览器同源策略的限制

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值