跨域问题

什么是跨域

浏览器使用ajax时，如果请求的接口地址和当前打开的页面 地址 不同源 称之为跨域

• ajax：浏览器只有使用ajax发送请求才会出现跨域，href属性雨src属性不会出现跨域
• 接口地址：ajax请求的url
• 打开的页面：当前页面的window.location.href
• 不同源：浏览器使用ajax，向不同源的接口发送请求，称之为跨域访问

同源

同源定义：两个url地址的协议与主机与端口一致

• 协议：http，https，file
• 主机：域名或者ip地址
• 端口：3000，4399

不同源

不同源定义：两个url地址，协议 主机 端口 任何一个不一致

• http:127.0.0.1: 3000/abc
• http:127.0.0.1: 3000/efg
• https:127.0.0.1:3000/efg
• http:127.0.0.1: 3000/hero/add
• http:127.0.0.1: 4399/hero/add
• http:127.0.0.1: 4399/hero/all

为什么要有同源和不同源

出于安全考虑，浏览器不允许，页面向不同源的接口请求数据，因为如果接口和网页不同源，浏览器认为是2个不同的服务器，不同的服务器中内容是不可控的，不允许访问了
总结说人话:浏览器为了 保护你的电脑安全
举个栗子:你去肯德基店里点餐，店员只允许你点肯德基的产品(炸鸡，可乐，上校鸡块)，如果此时你在肯德基店里面点麦当劳的产品，浏览器会认为你是坏人，就会让保安把你赶出去

跨域问题的解决

• 跨域是前端工作中不可避免的问题:我们经常会出现请求不同源接口的情况，为了能够获取数据，解决跨域的问题方案也有很多，但是常用的就两种
• 第一种：CORS
  • 目前的主流方案，也是最简单的方案,直接让后端设置响应头,允许资源共享就ok
• 第二种：JSONP
  • 曾经的跨域杀手，专治各种跨域问题。现在慢慢的淡出历史舞台
  • PS:面试官特别喜欢问这个，因为这个有一定的技术难度， 也能体现一个人的实际开发经验
  • jisonp是前后端来配合使用的.
  • 使用原理:通过动态创建script标签,通过script标签的src请求没有跨域限制来获取资源