大型搜索网站开发,edm营销网站,外贸网站优化怎么做,小型企业管理软件哪个好跨域问题产生的原因#xff1a;浏览器同源策略
后面的通俗解释小标题下的内容是便于大家理解同源策略和跨域问题。
而同源策略和跨域问题这两个小标题下的内容虽然比较专业不容易阅读#xff0c;但是还是建议大家花时间理解并记忆#xff0c;因为这是前端面试中的常考点。…跨域问题产生的原因浏览器同源策略
后面的通俗解释小标题下的内容是便于大家理解同源策略和跨域问题。
而同源策略和跨域问题这两个小标题下的内容虽然比较专业不容易阅读但是还是建议大家花时间理解并记忆因为这是前端面试中的常考点。
同源策略
同源策略(Same-0rigin Policy)是指浏览器安全策略中的一项重要规则,它规定了浏览器只允许当前网页的脚本与来自同一站点(协议、主机、端口号相同)的窗口进行交互,而限制了与不同源(协议、主机、端口号任一不同)的窗口进行交互。这种限制能够有效保障用户的信息安全和隐私。
同源策略限制了跨域请求、Cookie、Localstorage、IndexedDB 等跨站点资源的访问,防止恶意网站窃取用户数据和攻击。同源策略的存在是 Web 安全的重要保障,是浏览器防范跨站脚本攻击(XSS)、跨站请求伪造(CSRF)等安全威胁的关键措施。
如果需要进行跨域请求或共享数据可以通过特定的手段(如 JSONP、CORS、代理等)来实现。同时Web 应用开发中应当严格遵守同源策略的原则避免将敏感信息暴露在跨域页面中。
跨域问题
跨域问题(Cross-0rigin Resource sharingCORs)是由于浏览器的同源策略(Same-0rigin Policy)导致的。如果两个 URL 的协议、主机名和端口号都相同,那么它们就是同源的,否则就是跨域的。当网页发起跨域请求时浏览器会根据同源策略限制请求。
通俗解释
举个例子我的前端服务运行在我电脑的5173端口而后端服务运行在我队友电脑的8080端口由于咱们前后端不在同一个端所以我通过浏览器向我队友的后端服务发送请求浏览器会认为我的请求是不安全的于是拒绝我的请求
而如果是小程序开发小程序页面不是运行在浏览器的没有同源策略也就不存在跨域问题小程序开发中前端可以直接向不同源的后端发送请求
配置代理服务器解决跨域问题
原理
由浏览器直接向后端服务发送请求会产生跨域问题 那么我们可以通过配置代理来解决跨域问题浏览器先将请求发送至前端服务由于都是5173端口不存在跨域问题再由前端服务转发至后端服务前端服务和后端服务之间的交互是脱离浏览器的没有同源策略也就不存在跨域问题
这时前端服务就充当了一个“中介”我们称它为“代理服务器” 方法
找到关于请求配置的request.js文件将请求基地址改成/apis改成其他英文单词也行由于你没有写类似于http://localhost:8080这样的基地址而是只写了一个不完整的地址/apis所以会自动拼接上AJAX请求发送时所在的源也就相当于你在请求基地址写的是http://localhost:5173/apis
这样做的目的是将请求发往前端服务所在的源 vite.config.ts文件中添加如下配置这段代码可以将前端服务收到的请求转发至后端服务 配置代理服务器的代码如下大家需要根据自己的实际情况修改target中后端服务所在的源
注意第三行代码中单引号里面的内容必须和前面的请求基地址一样——/apis
server: {proxy: {/apis: {target: http://enx5eq.natappfree.cc, //后端服务所在的源changeOrigin: true, //修改源rewrite: (path) path.replace(/^\/apis/, ) // /apis替换为}}}
如果后端接口地址是/api/getVerification那么我们就可以写出如下函数最终的请求将被发送至http://enx5eq.natappfree.cc/api/getVerification 代码解释
假设请求接口的地址是/user/getUserName由于请求基地址的配置请求将会发往http://localhost:5173/apis/user/getUserName 而由于 http://localhost:5173/apis/user/getUserName 中包含/apis代理生效请求最终会发往http://enx5eq.natappfree.cc/user/getUserName原理如下图 需要注意的是虽然浏览器显示的请求地址看起来好像不对但是实际上请求已经被正确发送至后端服务器了
