全栈----跨域

新建三个文件夹分别代表一个总服务器和两个客户端，客户端通过点击页面上的按钮来获取总服务器上的数据。

 

main代表总服务器，first和second代表客户端需要向main服务器获取数据;main文件夹中设置两个路由来供访问其端口号为8080;second的端口号为8082；first的端口号为8081

 

 

先建好文件夹生成package.json文件和node_modules文件夹；创建好网页页面所在的文件夹，做好前期准备工作

 

router.js

main>index.js

引入router文件，设置两个路由，当访问时放回我们提前设施的数据，当然这个数据并不会只是这一点点，听他只是我们假设的数据

 

first/second>index.js

first和second两个文件夹只是访问数据的所以不需要设置路由，这里的router.static是在修改router文件中的静态托管，就是你的html文件所在的文件夹。

 

firest>src>index.html

给按钮绑定点击事件，再利用AJAX去访问main的网址从而获取数据。

 

second>src>index.html

 

注意：要修改first/second中router.js里面的端口号，因为同一台电脑  不能用同一个端口运行多次服务器   但是一台电脑是可以运行多个服务器

 

 

我们通过网址访问到first和second中的页面

 

当我们点击按钮想要获取mian 中的数据时后台就报错了

但是我们看小黑窗后端是发送了数据给页面的，只是页面没有接受

 

这就是跨域

浏览器为了用户的信息安全,网页中有一个网络请求技术:例如AJAX 在网络请求时 请求的网址 和 当前页面的网址 不是同一台服务器 就会被拒绝接受服务器发送的数据

非同源不是AJAX就不是跨域

什么是同源策略?

浏览器的一种安全策略: 指 两个网址的 协议 ip port 三者一样代表同源

https://www.hqyj.com/index.html

https://www.hqyj.com/home/goods/ajax1

//同源==>pathname不参与同源判断

 

IT培训机构|专注编程培训|软件开发培训_华清远见教育

https://www.hqyj.com/ajax

//异源 ==> 协议不一样

 

IT培训机构|专注编程培训|软件开发培训_华清远见教育

http://www.hqyj.cn/ajax

//异源 ==> 域名(ip和port)不一样

 

IT培训机构|专注编程培训|软件开发培训_华清远见教育 //假设DNS解析为 172.153.2.60:7001

http://172.153.2.60:7001/ajax

//同源 ==> 域名(ip:port)一样