# 跨域

# 什么是跨域?

简单来说跨域是指,一个网站下的网页向另外一个网站请求资源(包括图片、文字等等),这就形成了跨域。比如说:link、script、img都可以引入其他网站的文件。

跨域主要分为5大类型:

  1. 域名不同:http://www.a.com 和 http://www.b.com
  2. 子级域名不同:http://ab.bai.com 和 http://ba.bai.com
  3. 端口不同:http://localhost:3000 和 http://localhost:5000
  4. 协议不同: http://12306.cn 和 https://12306.cn
  5. 同一台电脑,自己的域名和IP互访: http://localhost:3000 和 http://127.0.0.1:3000

# 什么是同源?

同源策略:同源策略是浏览器定义的,他主要是解决浏览器的安全问题存在的,它禁止ajax使用其他服务器来源的数据,只有响应头中的来源地址和当前网页的地址相同,才允许使用该数据。 所以我们如果要跨域获取数据,就会被浏览器拦截!

# 为什么要跨域?

那么问题来了,我们为什么要跨域请求呢:实际上我们在真实项目中,前后端项目是分离开的,不是一个人在自己电脑上开发的。在开发联调时,我们要想从前端向后端请求数据,就必然会涉及到跨域请求。

# 怎么解决跨域?

那么如何解决这个问题呢:

  • CORS跨域
  • JSONP跨域
  • Proxy前端代理

简单讲一下使用CORS中间件:

原理就是在服务器端给客户端响应数据前,将接口的响应头地址改为客户端对应的地址(伪装),例如:

res.writeHead(200,{
  "Access-Control-Allow-Origin":"客户端地址:端口号",
  "Content-Type":"application/json;charset=utf-8"
});
res.write(JSON.parse(result));
res.end()
Last Updated: 5/22/2022, 3:57:36 PM