同源策略和跨域解决方案

于 2024-03-09 09:32:21 发布
阅读量419 收藏 7
点赞数 12
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_77774994/article/details/136577353
版权
本文介绍了浏览器的同源策略限制，如何通过jsonp动态script标签实现跨域请求，以及在Vue中使用proxy进行跨域配置。重点讲解了CORS的原理，它是通过设置后端代码来允许前端进行跨域访问。
摘要由CSDN通过智能技术生成

同源策略:

 浏览器出于安全考虑，浏览器不允许访问不同源下的策略，
 协议不同，域名不同，端口不同都会产生不一样的跨域

跨域的解决方案
1.jsonp实现原理：主要是利用动态创建script标签请求后端接口地址.
2.通过代理的方式
我在vue中使用那个vue.config.js里面配置一个proxy,里面有个target属性指向跨域链接.修改完重启项目就可以
在这里插入图片描述
3.CORS

CORS全称叫跨域资源共享，主要是设置后端代码来达到前端跨域请求的
Clavicle·
关注
  • 12
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
同源策略和跨域
zhuxuerong的博客
11-12 123
URL（Uniform Resource Locator,统一资源定位符）???? URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。 也可认为由4部分组成：协议、主机、端口、路径 URL的一般语法格式为：(带方括号[]的为可选项)： protocol://hostname[:port]/path/[;parameters][?query]#fragment protocol（协议） 指定使...
同源策略与跨域
JimmyLuo17的博客
07-26 505
在浏览器中，有一个很重要的安全性限制，被称为 “Same-Origin Policy”（同源策略）。通过 XHR 实现 Ajax 通信的一个主要限制，就来自与同源策略。即默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作。这时候“同源策略”就显得过于苛刻，于是，就需要进行跨域访问数据了！一、同源策略？同源策略（Sa
跨域的五种解决方案详解
weixin_64214997的博客
06-11 2万+
CORS :全称cross origin resource share （资源共享） 工作原理： 服务器 在返回响应报文的时候，在响应头中 设置一个允许的header
九种常见的跨域解决方案（详解）
最新发布
qq_44741577的博客
03-07 8529
在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
跨域9种解决方案
欲变世界，先变其身
11-13 3万+
什么是跨域？说起跨域，就要知道什么是浏览器同源策略。浏览器同源策略：必须是协议、域名、端口完全一致的才符合同源策略，如果以上三项，有一项不同都涉及到跨域问题。
最常见的六种跨域解决方案
热门推荐
m0_37873510的博客
08-27 4万+
常见的跨域解决方案
解决跨域的三种方法
weixin_58448088的博客
02-21 1万+
1、详解解决跨域三种方法 2、瀑布流布局 3 、函数的节流 4、函数的防抖
同源策略和跨域解决方案.docx
10-26
同源策略和跨域解决方案 同源策略是浏览器的一个安全功能，用来限制不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这...
深入浅析同源策略和跨域访问
11-22
2. CORS（Cross-Origin Resource Sharing）：这是一种现代的跨域解决方案，通过在服务器端设置特定的HTTP响应头（如`Access-Control-Allow-Origin`），允许指定的源进行跨域请求。CORS提供了更灵活的控制，支持多种...
JavaScript同源策略和跨域访问实例详解
10-18
在实际开发中，选择哪种跨域解决方案取决于应用场景和需求。JSONP适用于简单的GET请求，且不涉及安全性要求较高的操作，而CORS则更适合复杂的交互和需要服务器端控制的场景。无论选择哪种方式，都需要充分考虑安全性...
Python项目跨域问题解决方案
12-17
由于浏览器的安全策略限制，不同源的资源之间不能自由通信，这就需要我们采取一些措施来解决Python项目的跨域问题。本篇文章将详细解释如何解决Python Django项目的跨域问题。 首先，我们来看第一个解决方案，通过`...
9种常见的前端跨域解决方案（详解）
zh0623的博客
03-25 2万+
文章转载自：9种常见的前端跨域解决方案（详解）_慕课手记 (imooc.com) 一、什么是跨域？   在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 什么是同源策略？   同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。   同源策略限
解决跨域问题8种方法，含网关、Nginx和SpringBoot~
m0_67597657的博客
02-04 2099
跨域问题是浏览器为了保护用户的信息安全，实施了同源策略（Same-Origin Policy），即只允许页面请求同源（相同协议、域名和端口）的资源，当 JavaScript 发起的请求跨越了同源策略，即请求的目标与当前页面的域名、端口、协议不一致时，浏览器会阻止请求的发送或接收。
跨域问题解决方案（三种）
usa_washington的博客
09-15 1400
三种方式解决跨域
9种常见的跨域解决方案（详解）
qq_44741577的博客
03-07 1298
在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
跨域的十种解决方案详解（总结）
MoXinXueWEB的博客
07-26 8007
小菜鸟在总结
几种常见的跨域解决方法
liusunquan123的博客
08-03 1万+
由于浏览器的同源策略，当我们请求网络资源时，所在页面的url中的协议，端口，域名其中一个与请求资源的url不同，都会出现跨域的问题。但是浏览器不能没有这个策略，这样会很危险，像csrf，xss攻击等**。那么这里有个容易理解错误的地方，跨域并不是说服务器没法返回资源给浏览器，而是浏览器没办法正确拿到，这不是服务器的问题。**但是也不是所有的请求都是这样的，像表单提交就不存在什么跨域问题，因为表单不需要服务器返回数据给它，它只负责提交就好了...
前端常见的跨域解决方案
qq_24832277的博客
06-29 2218
一、什么是跨域 专业的解释是，两个不同源的服务去访问对方的资源，就是所谓的跨域，而浏览器处于安全方面的考虑是不允许跨域请求的 跨域非服务端控制的，而是浏览器的安全策略，当发生跨域请求时候，请求是可以正常发送到对方服务器的，只是浏览器会根据 ”Access-Control-Allow-Origin" 来判断当前域名是否有访问权限，从而决定是否解析返回的数据信息。 其中简单的说就跨域是浏览器不会解析跨域请求返回的数据。 二、什么是同源 同源是指协议、域名、端口都相同 URL
跨域的五种最常见解决方案
tyxjolin的专栏
04-27 2699
CORS的工作原理是在客户端发起跨域请求时，浏览器会发送一个OPTIONS请求（预检请求），该请求包含一些HTTP头信息，例如Origin、Access-Control-Request-Method、Access-Control-Request-Headers等。PostMessage的优点是安全可靠，可以通过开发者自己的脚本进行跨域请求，不需要依赖服务器的支持。代理的工作原理是在同源策略允许的情况下，通过客户端发送请求给自己的服务器，然后服务器再将请求转发给目标服务器，并将响应返回给客户端。
Ajax跨域解决方案：JSONP、CORS与代理请求
JSONP是一种早期的跨域解决方案，适用于支持GET请求的API。它是通过动态插入`<script>`标签来实现的，因为`<script>`标签不受同源策略限制。服务端提供一个可被调用的JavaScript函数，前端通过指定该函数名作为回调...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值