Vue 前端怎么解决跨域问题?

1.什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
Vue 前端怎么解决跨域问题?_第1张图片

2.什么是同源策略

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说

Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

同源策略又分为以下两种:

  • DOM同源策略:禁止对不同源页面DOM 进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。
  • XMLHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。么去解决跨域?

2.解决跨域的三种方法

1. JSONP

JSONP 包含两部分: 回调函数和数据。

回调函数是当响应到来时要放在当前页面被调用的函数

数据就是传入回调函数中的json数据,也就是回调函数的参数了

原理: 是用script标签的src属性向后台发起接口请求,把返回来的值作为一个js处理

应用场景:只能适用于get请求接口方式,因为get请求方式把参数值拼接到url地址头上

优点: 前端不需要做过多处理,在后端解决跨域问题 ;它可以兼容低版本的浏览器





JSONP 实例


  • customername1
  • customername2

上述实现原理:

(1) 利用script标签,规避跨域

(2) 在客户端声明一个函数,function jsonCallBack(){}

(3) 在服务端根据客户端传来的信息,返回一个字符串

(4) 客户端,利用

你可能感兴趣的:(Vue,跨域,Vue跨域,SpringBoot跨域)