全栈----跨域

发布于：2023-02-02 ⋅ 阅读:(219) ⋅ 点赞:(0)

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

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 三者一样代表同源

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

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

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

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