​ 方案

 
  1. JSONP

jsonp需要后端进行配置,并且前端需要动态生成script标签通过callback调用函数进行操作的跨域解决方案

不建议使用该方案:
  • 前后端均需进行配置处理,增加了工作量
  1. CORS
 cors是由后端进行配置 前端正常发送请求即可使用的跨域解决方案。

优点:
  • 前端无需进行额外的控制
  • 可以带上cookie请求,但前后端均需配置
 
 
​ 示例
 
跨域引起的报错

  • JSONP
通常为了减轻web服务器的负载,我们把js、css,img等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许,基于此原理,我们可以通过动态创建script,再请求一个带参网址实现跨域通信。

function JSONPhandle(d){
console.log(d);
};
var Script=document.createElement('script');
Script.src='http://localhost:3000/jsonp?cb=JSONPhandle';
document.body.append(Script);

  

Node服务器端配置:
router.get('/jsonp', function(req, res, next) {
var msg=JSON.stringify('老铁,JSONP了解一下')
if(req.query.cb){
var str=req.query.cb+'('+msg+')';
res.send(str);
return;
}
res.send(msg);
});
页面结果:

  • CORS
普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置
前端代码:
<script>
$.get('http://localhost:3000/cors', (data) => {
console.log(data);
})
</script>
后端代码:
var createError = require('http-errors');
var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());
页面结果:

跨域常见解决方案jsonp,cors示例的更多相关文章

  1. C#进阶系列——WebApi 跨域问题解决方案:CORS

    前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨域问题一些细节. WebApi系列文章 C#进阶系列— ...

  2. C#进阶系列——WebApi 跨域问题解决方案:CORS(转载)

    C#进阶系列——WebApi 跨域问题解决方案:CORS   阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2.场景测试 四.总结 正文 前言:上篇总结了下W ...

  3. 跨域学习笔记2--WebApi 跨域问题解决方案:CORS

    自己并不懂,在此先记录下来,留待以后学习... 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨 ...

  4. WebApi 跨域问题解决方案:CORS

    注:本文为个人学习摘录,原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看W ...

  5. (转)C# WebApi 跨域问题解决方案:CORS

    原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2. ...

  6. 再也不学AJAX了!(三)跨域获取资源 ② - JSONP & CORS

    浏览器的"同源策略"固然保障了互联网世界的数据隐私与数据安全,但是如果当我们需要使用AJAX跨域请求资源时,"同源策略"又会成为开发者的阻碍.在本文中,我们会简 ...

  7. 搞定所有的跨域请求问题 jsonp CORS

    网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置.本文只想解决问题,所有的代码经过亲自实践.   本文解决跨域中的 ge ...

  8. PHP下ajax跨域的解决方案之CORS

    由于安全的限制(同源策略,javascript只能访问同域名下的内容),如果需要进行跨域操作,那就免不了要进行跨域.   CORS(跨域资源共享,Cross-Origin Resource Shari ...

  9. cors跨域和jsonp劫持漏洞 和 同源策略和跨域请求解决方案

    cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...

随机推荐

  1. Python核心技术与实战——二一|巧用上下文管理器和with语句精简代码

    我们在Python中对于with的语句应该是不陌生的,特别是在文件的输入输出操作中,那在具体的使用过程中,是有什么引伸的含义呢?与之密切相关的上下文管理器(context manager)又是什么呢? ...

  2. shell脚本if语句后面的中括号[]与java的if后面的小括号不同(),实际上[左中括号相当于test命令

    四.shell 中的条件判断命令 test 和 [   test 命令可以处理 shell 脚本中的各类工作.它产生的不是一般的输出,而是可使用的退出状态.test 命令通过接受各种不同的参数,来控制 ...

  3. 【2019银川网络赛】L:Continuous Intervals

    题目大意:给定一个长度为 N 的序列,定义连续区间 [l, r] 为:序列的一段子区间,满足 [l, r] 中的元素从小到大排序后,任意相邻两项的差值不超过1.求一共有多少个连续区间. 题解:单调栈 ...

  4. 【hiho1087】Hamiltonian Cycle

    题目大意:给定一个 N 个点的有向图,计数图上哈密顿回路的条数. 题解:哈密顿回路需要经过除了初始位置,每个点恰好一次.如果已知一条哈密顿回路的方向,那么从这条路上任意一个点出发,得到的都是同样的结果 ...

  5. HDU6736 2019CCPC秦皇岛赛区 F. Forest Program

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=6736思路:dfs+栈 判环           设图中环的大小分别为 c1, c2, ..., ck,不属 ...

  6. hiho #1144 : 01串(模拟)

    #1144 : 01串 时间限制:7000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个整数n和m,求是否存在恰好包含n个0和m个1的01串S,使得S中不存在子串"001 ...

  7. 3DES加解密类

    using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace GT.C ...

  8. textstudio添加中文支持

    修改编译器为XeLaTeX,方法如下: Options -> Configure -> Build -> Default Compiler -> XeLaTeX 并在文本开头处 ...

  9. 微信支付(公众号)爬坑记,包含 total_fee 失败和 JSAPI 签名验证失败等等

    做商城类网站不免会需要做支付功能,目前在中国大陆通用的做法就是使用支付宝支付和微信支付,上一篇博文已经讲个支付宝支付. 这篇文章来讲一讲微信支付,微信支付的方式有很多种,本文主要讲 JSAPI 支付的 ...

  10. [LOJ3046][ZJOI2019]语言:树链的并+线段树合并

    分析 问题显然可以转化为对于每个节点询问所有这个节点的所有链的链并的大小. 考场上我直接通过树剖打标记+树剖线段树维护以\(O(n \log^3 n)\)的时间复杂度暴力实现了这个过程.(使用LCT或 ...