还不懂跨域是什么?一篇文章,了解何为跨域及解决方案

352 阅读3分钟

跨域

什么原因导致了浏览器报跨域错误

发起ajax请求的那个页面的地址 和 ajax接口地址 不在同一个域中

跨域错误是由于 不同源的ajax请求导致的

同源: 协议相同 , 域名相同 , 端口相同

跨域的请求是正常能发送的,服务器也能正常响应,但浏览器觉得不安全。跨域问题出现的基本原因是浏览器的同源策略。同源策略是一个重要的安全策略,它限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。

解决思路:

请求响应双方url不同源

  • 服务器代理
  • 请求是ajax 改发JSONP

浏览器觉得不安全 (后端还是能收到请求的)

  • 可以安装一个浏览器插件allow-control-allow-origin 绕过同源策略。
  • 用postman软件测试
  • CORS

错误原因:不同源ajax请求

后端还是能收到请求的,错误是发生在浏览器端

cors:

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10(ie8通过XDomainRequest能支持CORS)。

跨域报错信息:

image.png 出现跨域不要慌,一般后端只需要简单设置一下就可以正常请求了,在nodejs中,可以通过以下方法:

1.手动实现

通过在被请求的路由中设置header头,可以实现跨域。

app.get('/get', (req, res) => {
  // * 表示允许任何域名来访问
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.send({msg:'ok'})
})

不过这样所有的接口都需要手动设置,比较麻烦,推荐第二种

2.使用cors

  1. 它是一个npm包,要单独下载使用 npm 包 cors npm i cors
  2. 当做express中的中间件,注意代码应该放在顶部

只需要添加两行代码即可保证,你写的所有接口,都能正常请求

const cors = require('cors')
app.use(cors())

jsonp:

是一种借助于 script 标签发送跨域请求的技巧。它本质并不是ajax请求,所以没有跨域问题。

原理:

  • script的src属性可以请求外部的js文件,这个请求不是ajax,它没有跨域问题。
  • 借助 script 标签的src请求服务端上的接口。<script src="http://localhost:3000/get"
  • 服务端的接口返回JavaScript 脚本,并附上要返回的数据。例如:res.end("fn(数据)")

image.png 注意:

1.前端提前准备的函数名,必须与后端传过来的函数名一致

2.两者顺序不能变,相当于js的引入顺序,是先引入一个 函数声明fn(形参),之后从后端接收到 函数的调用 fn(实参)

3.jsonp只支持get请求,原因是用到的原理是,用的script的src属性,只能获取外部资源(get请求)