前端学习前端开发那些事儿

如何解决跨域问题

2021-01-28  本文已影响0人  李小白呀

问题解析:
(1)考察目标

 1)跨域出现的原因

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

(2)题目分析

跨域出现的原因:同源策略。

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

解决的跨域的方式有哪些

1.反向代理跨域

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数据,服务器将数据放在一个指定名字的回调函数的参数位置传回来

应用场景

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

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

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

上一篇 下一篇

猜你喜欢

热点阅读