node.js基础03

1.1-跨域介绍

• 1.跨域固定报错格式

  • 只要是出现跨域问题，浏览器就会出现一个固定格式(没有之一)的报错信息

    • Access to XMLHttpRequest at '服务器url地址' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

正在上传…重新上传取消正在上传…重新上传取消

• 2.什么是跨域？

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

    • （1）ajax : 浏览器只有使用ajax发送请求才会出现跨域。 href属性与src属性不会出现跨域

    • （2） 接口地址 ： ajax请求的url

    • （3）打开的页面：当前页面的window.location.href

    • （4）不同源 ： 浏览器使用ajax,向不同源的接口发送请求，称之为 跨域访问

• 3.什么是同源？

  • MDN官方文档传送门：浏览器的同源策略 - Web 安全 | MDN

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

    • 协议：http , https , file

    • 主机 ： 域名或者ip地址 （127.0.0.1）

    • 端口 ：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

正在上传…重新上传取消正在上传…重新上传取消

 

• 4.为什么要有同源与不同源？

  • 出于安全考虑，浏览器不允许，页面向不同源的接口请求数据，因为如果 接口 和 网页不同源，浏览器认为是2个不同的 服务器，

  • 不同的服务器中内容是不可控的，不允许访问了

  • 总结说人话： 浏览器为了保护你的电脑安全

    • 举个栗子： 你去肯德基店里点餐，店员只允许你点肯德基的产品（炸鸡，可乐，上校鸡块），如果此时你在肯德基店里面点麦当劳的产品，浏览器会认为你是坏人，就会让保安把你赶出去

• 5.跨域解决方案介绍

  • 跨域是前端工作中不可避免的问题：我们经常会出现请求不同源接口的情况，为了能够获取数据，解决跨域的问题方案也有很多，但是常用的就两种

  • 第一种 ： CORS

    • 目前的主流方案，也是最简单的方案

  • 第二种：JSONP

    • 曾经的跨域杀手，专治各种跨域问题。现在慢慢的淡出历史舞台

    • PS：面试官特别喜欢问这个，因为这个有一定的技术难度，也能体现一个人的实际开发经验

 

<!-- 
​
1.跨域固定报错格式
    * 只要是出现跨域问题，浏览器就会出现一个固定格式(没有之一)的报错信息
    * Access to XMLHttpRequest at '服务器url地址' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
​
2.什么是跨域
    * 浏览器使用 ajax时，如果请求了的接口地址 和  当前打开的页面 地址  不同源 称之为跨域
        * ajax : 浏览器只有使用ajax发送请求才会出现跨域。href属性与src属性不会出现跨域
    * 接口地址 ： ajax请求的url
    * 打开的页面：当前页面的window.location.href
    * 不同源  ： 浏览器使用ajax,向不同源的接口发送请求，称之为 跨域访问 
​
3.什么是同源？
    * 同源定义 ： 两个url地址的 协议 与 主机 与 端口 均一致 (&&)
        * 协议：http , https , file
        * 主机 ： 域名或者ip地址 （127.0.0.1）
        * 端口 ：3000， 4399
    * 不同源定义： 两个url地址，协议 主机 端口任何一个不一致 （||）
        * 当前页面：http:127.0.0.1: