浅谈跨域

最新推荐文章于 2023-09-22 10:36:43 发布
最新推荐文章于 2023-09-22 10:36:43 发布
阅读量155 收藏
点赞数
文章标签： 前端 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43288210/article/details/84310071
版权

何为跨域？
跨域，就是浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了。
什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1.Cookie、LocalStorage 和 IndexDB 无法读取
2.DOM 和 Js对象无法获得
3. AJAX 请求不能发送
常见跨域场景
在这里插入图片描述
跨域解决方案
通过jsonp跨域
jsonp:
jsonp 全称是（JSON with Padding：填充式JSON)是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。
一个是描述信息的格式，一个是信息传递双方约定的方法。

json、jsonp的区别：
1、json返回的是一串数据、jsonp返回的是脚本代码(包含一个函数调用)
2、jsonp只支持get请求、不支持post请求 (类似往页面添加一个script标签，通过src属性去触发对指定地址的请求,故只能是Get请求)
　
jsonp的产生:

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

3.凡是拥有scr这个属性的标签都可以跨域例如

4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

5.而json又是一个轻量级的数据格式,还被js原生支持

6.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端

jsonp跨域
在这里插入图片描述
效果如下：
在这里插入图片描述

琉璃如梦如幻
关注
浅谈跨域问题
ergouy's blog
12-17 691
最近在写项目的时候，用到axios进行前后端交互，出现非同源请求跨域问题，查找相关资料解决问题后做此笔记以供参考，如有指正请您联系我 文章目录一 跨域1.含义2.举例3.目的二 解决方案---CORS1.概念2.简介3.思想4.主要参数5.两种请求6.简单请求流程7.非简单请求流程三 总结 一 跨域 1.含义   1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行...
浅谈跨域(四)——SSE试用
zhoujie_zhoujie的博客
02-11 2606
Comet虽然实现比较简单，但是实际使用过程中并不是那么简单，还需要考虑很多实际的问题，例如连接断开如何重连。而且Comet并不是HTML5规范的一部分，并且在服务器端和浏览器端都需要第三方库的支持。 幸运的是HTML5规范中新增了SSE（Server-Sent Event），直接使用SSE API就能实现和Comet一样的功能。Server-Sent EventSSE 用于创建到服务器的单向连接
vue 跨域配置解决方案
11-14
1、在使用vue开发的时候经常要涉及到跨域的问题，其实在vue cli中是有我们设置跨域请求的文件的。 2、当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://api.douban.com/v2', changeOrigin: true, pathRewrite: { '^/api': '' } } }, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false } 将target设置为我们需要访问的域名。 3、然后在main.js中设置全局属性： Vue.prototype.HOST = '/api' 4、至此，我们就可以在全局使用这个域名了，如下： var url = this.HOST + '/movie/in_theaters' this.$http.get(url).then(res => { this.movieList = res.data.subjects; },res => { console.info('调用失败'); });
vue+axios前端解决访问请求跨域问题
zfyymmd的博客
06-27 465
vue+axios前端解决访问请求跨域问题
vue开发项目前端axios请求跨域解决方案
海贼王某人的博客
12-09 1234
话不多说，直接上代码，跨域的问题一般只存在本地开发的时候，生产环境下一般是不存在跨域的，如果有，那也是后端去解决，开发时遇到跨域，要莫找后端处理，另一种就是前端配置代理请求解决： vue.config.js的配置如下，主要是proxy里面的配置 module.exports = { lintOnSave: false, devServer: { overlay: { warning: false, errors: false }, open: true
js ajax Django跨域,用CORS 解决vue.js django跨域调用
weixin_39783915的博客
08-05 361
1 什么是 CORS？Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方式的错...
VUE调用API教程，解决VUE跨域问题。
qq_42177117的博客
09-07 2738
VUE调用API方法 1、使用VUE-CLI脚手架做项目的情况下。//VUE-CLI做项目太方便了。 2、安装axios. npm i axios 3、在main.js文件引入axios原型链 import axios from 'axios' Vue.prototype.$axios = axios 4、在config文件夹中的index.js文件中有的 proxtable{} proxyTable: { '/book': { //聚合平台有很多免费的API，大家可以
浅谈Ajax跨域Session和跨域访问
10-25
Ajax跨域请求和跨域Session是前端开发中经常遇到的问题，它们对于保证Web应用的安全性和用户体验都至关重要。在处理跨域问题时，开发人员需要注意很多细节和规则，以确保数据的正确传输和用户状态的正确识别。 首先...
浅谈angular.js跨域post解决方案
10-19
在Web开发中，跨域问题是前端工程师经常遇到的一个挑战。所谓跨域，指的是当一个域的Web页面尝试去访问另一个域下的资源时，由于浏览器的同源策略，这种请求通常会被浏览器的安全机制阻止。同源策略限制了从同一个源...
Vue中如何进行跨域处理
最新发布
stormjun的博客
09-22 588
跨域请求（Cross-Origin Request）指的是在浏览器端，通过JavaScript代码向不同域名（或端口、协议）的服务器发送HTTP请求。在Web安全模型下，浏览器限制了跨域请求的发起，这是出于安全考虑，以防止恶意网站窃取用户数据或进行其他攻击。例如，如果您的前端应用部署在，但您尝试通过Ajax请求，这就属于跨域请求，因为域名和端口不同。处理跨域请求是前端开发中的重要任务之一。Vue.js提供了许多方法来解决跨域问题，包括使用代理服务器、JSONP、CORS等。
Vue开发中遇到的跨域问题及解决方法
10-15
在本篇文章里小编给大家整理的是关于Vue开发中遇到的跨域问题及解决方法，需要的朋友们可以学习下。
前后端分离跨域问题：Access to XMLHttpRequest at http://xxx.xxx from origin ‘http:....
weixin_44773752的博客
04-01 9963
解决前端使用ajax访问后端出现的跨域问题：Access to XMLHttpRequest at http://xxx.xxx from origin ‘http://localhost:8000’ has been bl… //后端Controller添加@CrossOrigin注解 @CrossOrigin(origins = "*",maxAge = 3600) @RestController public class testController { @GetMapping("/get
Access to XMLHttpRequest at ‘http://xx‘ from origin ‘http://xx‘ has been blocked by CORS policy:
热门推荐
记录知识、锤炼自我
09-30 6万+
问题场景 错误信息： Access to XMLHttpRequest at 'http://localhost:9090' from origin 'http://localhost:9090' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 翻译：【在http://localhost:9090对http://localhos
报错： Access to XMLHttpRequest at ‘http://127.0.0.1:5000/markdownlang/‘ from origin ‘null‘ has been bl
RT1314的博客
06-17 5499
报错： Access to XMLHttpRequest at ‘http://127.0.0.1:5000/markdownlang/’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource 在用ajax时，出现以上的跨域请求的报错(使用python的flask搭建的后台)： 报错代码： from fla
关于django中API接口，POST报错No Access-Control-Allow-Origin header is present on the requested resource
Crazy的博客
06-23 1537
再次更新吧，上次找到了一个get方法简单的使用可以避免 No 'Access-Control-Allow-Origin' 的问题，然后我就把GET改成POST，结果就出错，前端代码也只是改了POST，如下： $.ajax({ // method: 'GET', method: 'POST', url: "http://127.0.0.1:8000/register/helloApi"
解决Vue跨域访问后端API问题
pukun888的博客
05-07 4891
文章目录前言一、vue.config.js文件二、配置代理参数总结 前言 我们在写前后端分离的时候，请求后端接口是必要步骤，但是这个时候就有个问题，因为前段和后端是归属于不同端口，我们在直接访问后端时，会触发csrf（跨站请求伪造） 一、vue.config.js文件 vue项目中可选的配置文件，你可以选择用这个文件去配置vue项目，也可以选择在package.json文件中vue字段去配置，但是你需要严格按照json的写法 提示：我创建完项目之后，里面没有vue.config.js文件，所以我自己在
解决本地vue项目访问服务器api（跨域访问）
weixin_44057301的博客
05-31 8491
错误：开发环境下的本地vue项目请求获取服务器上的api，服务器上的api不对外开放，只允许内部访问，报错出现跨域访问请求的错误 解决： 1、首先，在本地vue项目中的config/index.js中在proxyTable中添加服务器的地址； proxyTable: {//开发环境下的跨域问题解决 '/api': { target: 'http://192.xxx.xxx.xxx:8080', //源地址 changeOrigin: true, //改变源
vue中设置跨域，使用axios请求
halo1416的博客
10-22 1485
在vue的时间开发过程中遇到比较头疼的事情之一，就是在本地与非本地环境中的接口进行联调。最常遇见的就是跨域问题，一把的解决方法有三种： 1. 后台更改header（注：这是后台的事，我们做不了） 2. 使用JQuery提供的jsonp  (注：只为了使用jsonp而引入Jquery，有点浪费哈) 3. 使用http-proxy-middleware 代理解决（注：项目使用vue-cli脚手架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值