如何解决跨域问题

Posted 2020-11-28 yihengbaobei

（1）考察目标

1）跨域出现的原因

2）解决的跨域的方式有哪些。

（2）题目分析

1）跨域出现的原因：同源策略。

什么是同源策略：同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互，同源三要素：协议、端口、域名。当一个请求url的协议、域名、端口**三者之间任意一个与当前页面url不同即为跨域。请求就不被允许。

2）解决的跨域的方式有哪些

反向代理跨域

CORS跨域

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。

它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

带cookie跨域请求：前后端都需要进行设置

前端设置：

// 前端设置：根据xhr.withCredentials字段判断是否带有cookie

// 原生ajax

var xhr = new XMLHttpRequest()

xhr.withCredentials=true

xhr.open(‘post‘,‘http://www.domain2.com:8080/login‘,true)

xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘)

xhr.send(‘user-admin‘)

xhr.onreadystatechange = function(){

  if(xhr.readyState===4&&xhr.status==200){}

}



// jQuery的ajax

$.ajax({

  url:‘http://www.text.com:8080/login‘,

  type:‘get‘,

  data:{},

  xhrfields:{withCredentials:true},

  crossDomain:true// 会让请求头中包含跨域的额外信息，但不包含cookie

})



// axios

axios.defaults.withCredentials=true

服务端设置(node）：

// node服务端设置

res.writeHead(200,{

  // 后端允许发送cookie

  ‘Access-Control-Allow-Credentials‘:‘true‘,

  // 设置允许访问的域

  ‘Access-Control-Allow-Origin‘:‘http://www.domain1.com‘,

  ‘Set-Cookies‘:‘l=a123456;Path=/;Domain=www.domain2.com;HttpOnly‘,



})

3）jsonp跨域

JSONP是服务器与客户端跨源通信的方法之一，最大特点就是简单，缺点是只支持get请求

核心思想：网页通过添加一个script元素，向服务器请求JSON数据，服务器将数据放在一个指定名字的回调函数的参数位置传回来

（3）应用场景

一般在vue项目中最主要的方式就是使用devServer的反向代理。

当使用多个地址也可以通过后台cors配置跨域。

另外也可以通过nginx进行代理。

视频地址：

https://p.bokecc.com/qrplay.bo?uid=78665FEF083498AB&vid=C6332E4A7DA07F4E9C33DC5901307461