什么是同源？什么是跨域？

客户端向服务器发送请求的时候，如果协议，域名(IP)和端口都一样，则称为同源，但凡有一个不一样则跨域，跨域请求默认受到浏览器的安全策略的限制，浏览器会给出相应的错误信息，对于客户端而言意味着请求失败

同源和跨域是浏览器的行为--浏览器安全机制
请求要么同源要么跨域：不同源则跨域
所谓同源就是指请求的源和对应的响应服务器:协议一致，IP(域名)一致，端口一致
影响范围

ajax 请求数据会受到影响，但是 html 代码中，二次请求文件，比如图片 img src, 或者 script src 这些不会受到限制

客户端跨域

我想通过远程接口获取天气信息
找到接口：http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=E4805d16520de693a3fe707cdc962045

发送请求，获取到天气数据

$.ajax({type: 'get',url: 'http://api.map.baidu.com/telematics/v3/weather',data: {ak: 'zVo5SStav7IUiVON0kuCogecm87lonOj',location: '广州',output: 'json'},success: function (result) {console.log(result.results[0].weather_data)}
})

跨域错误信息

错误信息说明：通过异步方式，从源http://127.0.0.1:5500向http://api.baidu...发送请求被CORS策略阻止了，不允许进行跨域请求

解决跨域

1.第一种在服务器设置（ Access-Control-Allow-Origin: *）（常用）

CROS 数据服务器添加响应头 Access-Control-Allow-Origin: *
星号表示所有域名，也可用指定域名代替星号

2.第二种 Proxy 代理（常用）

Proxy 代理，网页服务器，同时负责转发不同服务器的数据

只从网页服务器请求数据，那么网页和数据来自同一服务器，就不是跨域了

开发服务器转发代理配置步骤：

配置 vue.config.js

如何分辨哪些是数据请求?

proxy 是一个对象

对象里面是键值对, 其中 key 是用来匹配数据请求的

我们希望所有数据请求都能统一处理,无需重复声明
- 在所有数据请求的前面添加 /api 标识
- 然后就可以被 '/api' 拦截
将请求转向真实数据服务器

target 配置

代理解决跨域的根本在于服务器之间通讯受跨域影响, 可以用跟页面同域的服务器作为中转转发, 避免跨域问题.

3.第一种jsonp解决方式（但是在现在的前端领域并不常见了）

jsonp 利用 script 标签不受跨域限制的特性，使用 script 标签向数据服务器请求一个 js文件，数据服务器会将数据动态生成一个 js 文件响应

在ajax中实现跨域请求

在客户端实现跨域请求就称为客户端跨域

ajax中通过设置dataType为jsonp就可以实现客户端跨域

// 关键代码：第11行
$.ajax({type: 'get',url: 'http://api.map.baidu.com/telematics/v3/weather',data: {ak: 'zVo5SStav7IUiVON0kuCogecm87lonOj',location: '广州',output: 'json'},// 开户跨域请求dataType: 'jsonp',success: function (result) {console.log(result.results[0].weather_data)}
})

jsonp客户端跨域的原理

1.客户端跨域的本质是利用了script标签的src属性的天然跨域特性来实现
2.客户端发送请求的时候，传递一个客户端存在的函数名称到服务器，如<script src='http://127.0.0.1:3000/getData?callback=fn' ></script>
3.服务器中获取数据，根据接收的函数名称拼接成函数调用形式，如 res.end('fn({ "a": 1, "b" : 2 })')
4.通过script发送的请求，返回值默认会以js语法进行解析，客户端接收从服务器返回的数据(如：fn({ "aa": 11, "bb" : 22 })),以js语法解析，恰巧客户端有一个fn函数，完美
5.客户端获取到数据

客户端

<script>function fun(data){console.log("data:",data)
}
</script>
// 发送请求，传入客户端定义好的函数
<script src="http://127.0.0.1:3000/getUserList?callback=fun"></script>

服务器端

// 1.引入http模块
const http = require('http')
// 读取文件需要fs模块
const fs = require('fs')

// 2.创建服务器
const server = http.createServer()

// 3.添加服务器的端口监听
server.listen(3000, function () {console.log('服务器开好了: http://127.0.0.1:3000')
})

server.on('request', function (req, res) {let url = req.urllet fun = req.url.split('=')[1]console.log(fun)
let data = [{id:1,name:'jack'},{id:2,name:rose},{id:3,name:'tom'}]if (url.indexOf('/getUserList?') === 0) {fs.readFile(__dirname + "/data/users.json",'utf-8', function (err, data) {if (err) {res.end(`${fun}("404")`)} else {// 关键代码：服务器获取数据后，拼接数据和函数名称，返回函数的调用形式res.end(`${fun}(${data})`)}})}else{res.end(`${fun}("404")`)}
})

结果

总结：
所谓jsonp跨域就是利用了script标签的src属性的天然跨域特性，
在发送请求的时候，传递一个客户端的函数名称到服务器端，
服务器端获取数据，根据接收的函数名称拼接为函数调用的形式，
并返回到客户端，客户端获取返回数据的之后，按js语法进行解析，客户端就顺利的获取到数据了
只能发起get请求
可以理解的是，jsonp跨域严重的需要服务器端的配合，在现在的前端领域并不常见了

介绍什么是同源和什么是跨域，以及三种解决跨域问题的路径相关推荐

跨域理解及服务器端解决跨域问题
1.跨域请求,就是这个服务器去拿另一个服务器的资源,另一个服务器的域名肯定和当前的服务器域名不一样嘛. 浏览器默认是不允许跨域请求的,是浏览器对JavaScript施加的安全限制.是浏览器对JavaS ...
什么是同源策略？解决跨域的三种方法？
1.同源策略同源策略是一种约定和规范好的安全策略,是浏览器最核心最基本的安全保障.同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据. 满足的条件: (1)协议要相同:HTTP.HTT ...
26、vue前端出现跨域问题，如何解决跨域？
问题: 因为浏览器的同源策略的限制问题(协议.主机.端口一致),浏览器访问非同源的网址时,会出现无法获取数据(已发请求,服务器已收到请求),出现跨域问题 3种解决方法: 1.cors跨域(配置服务器) ...
什么是同源策略及解决跨域的三种方式
同源策略 1.1.1 所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源.同源策略/SOP(Same origin policy)是一种约 ...
前端实现跨域的三种方式
前端解决跨域的三种方式: 1.cors跨域(只需要后端配置) header("Access-Control-Allow-Origin:*"); // 允许任何来源 header(& ...
迁移学习与跨域推荐，以及解决跨域推荐的方法
本文主要是详细介绍一下跨域推荐,包含但不局限于以下几个部分: 迁移学习跨域推荐跨域推荐可以怎么做冷启动的其他一些方法可以参考的论文有哪些 1. 迁移学习以下内容参考[推荐系统中的多任务学习- ...
React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
1.组件通讯介绍组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据(state). 在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能. 而在这个过程中,多个组 ...
DOM跨域的三种解决方案：document.domain、window.name、window.postMessage
文章目录同域访问 document.domain 相同二级域名之间的跨域相同域名,不同端口之间的跨域 window.name window.postMessage 同域访问浏览本篇文章之前,需要 ...
前端跨域的理解和解决跨域的方案详解（全）
作为前端开发,我们遇到最多的应该就是跨域问题,对于萌新来说,跨域就是一道墙,不知所措,其实只要理解了跨域的含义和原理,解决它是不难的,今天给大家介绍下什么是跨域和跨域的解决方案! 什么是跨域? 跨域是 ...

介绍什么是同源和什么是跨域，以及三种解决跨域问题的路径

什么是同源？什么是跨域？

客户端跨域

跨域错误信息

解决跨域

1.第一种在服务器设置（ Access-Control-Allow-Origin: *）（常用）

2.第二种 Proxy 代理（常用）

开发服务器转发代理配置步骤：

3.第一种jsonp解决方式（但是在现在的前端领域并不常见了）

jsonp客户端跨域的原理

介绍什么是同源和什么是跨域，以及三种解决跨域问题的路径相关推荐

最新文章

热门文章

介绍什么是同源和什么是跨域，以及三种解决跨域问题的路径

什么是同源？什么是跨域？

客户端跨域

跨域错误信息

解决跨域

1.第一种 在服务器设置 （ Access-Control-Allow-Origin: *）（常用）

2.第二种 Proxy 代理 （常用）

开发服务器转发代理配置步骤：

3.第一种jsonp解决方式（但是在现在的前端领域并不常见了）

jsonp客户端跨域的原理

介绍什么是同源和什么是跨域，以及三种解决跨域问题的路径相关推荐

最新文章

热门文章

1.第一种在服务器设置（ Access-Control-Allow-Origin: *）（常用）

2.第二种 Proxy 代理（常用）