jsonp | 易学教程

11、在Nginx中解决跨域问题

阅读更多关于 11、在Nginx中解决跨域问题

1、简介比如用户在访问慕课网时,可能会发起一些向其他网站的请求,属于跨域,正常是无法访问的. 可以通过CORS跨域资源共享(Cross-Origin Resource Sharing)解决这个问题. 它是运行浏览器向跨Origin的服务器发起js请求获取响应. 实现跨域有常用的几种方法: Jsonp、SpringBoot Cors、Nginx 2、问题复现首先来复现出现跨域问题的场景 1、修改ngin.conf server { listen 89; server_name localhost; location = /imooc/img/face1.png { root /home; } } 2、测试在浏览器可以正常访问,http://129.211.80.178:89/imooc/img/face1.png 通过域名也可以正常访问,http://lwh.nginx.com:89/imooc/img/face1.png (在本地修改了host文件,配置lwh.nginx.com指向129.211.80.178) 3、测试在js代码中跨域能否正常访问,如下图,它是放在html中并部署到tomcat中,之后在浏览器通过tomcat访问该html进行访问, 打开控制台发现报错 3、解决方法 3.1、SpringBoot中配置支持跨域 @Configuration public

Vue开发企业级移动端音乐Web App

阅读更多关于 Vue开发企业级移动端音乐Web App

开发企业级移动端音乐App，拿下Vue.js高级知识点一、声明本项目来自于黄轶老师的慕课网教程 Vue 2.0高级实战开发移动端音乐 WebAPP ,目的在学习交流，如果有冒犯相关的权益，还望告知。二、简述由于本人也是第一次写文章，才薄智浅，博众一笑。关于某课上的音乐项目《Chicken Music》本人也是十分感兴趣，这篇文章主要目的是在于让更多的同学学习到深层次的前端知识（有点等于没说~哈哈哈）。本人是十分尊重知识产权的，但是日益增长的物质文化需要（支付不起价格）同落后的社会生产之间（工资低）的矛盾。本人怀着共同学习，共同进步的原则会为大家持续更新，数据接口一旦崩溃、修改、超时，会为大家在第一时间修改。三、效果四、页面代码块由于代码量太多只能展示部分关键代码，还望海涵。五、项目演示地址六、项目帮助此项目代码量巨大一篇文章，三言两语，远远不能表述清楚。如有需要本人可在闲暇之余提供力所能及的帮助 WeChat:13751817115 。也可以通过私人电邮联系我: 13751817115@163.com 。项目运用了: 1.Vue.js 的高级应用 - Vuex、嵌套路由、slot、mixin、code spliting 等技术 2.庞大的组件库 - 13个基础组件+15个业务组件 3.MVVM框架：Vue.js 4.状态管理：Vuex 5.前端路由

Nginx 极简教程（快速入门）

阅读更多关于 Nginx 极简教程（快速入门）

作者：dunwu github.com/dunwu/nginx-tutorial 推荐阅读 (点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计模式内容聚合 4. 排序算法内容聚合 5. 多线程内容聚合 Nginx 极简教程本项目是一个 Nginx 极简教程，目的在于帮助新手快速入门 Nginx。示例Demo： https://github.com/dunwu/nginx-tutorial/tree/master/demos Demo目录中的示例模拟了工作中的一些常用实战场景，并且都可以通过脚本一键式启动，让您可以快速看到演示效果。简介什么是 Nginx? Nginx (engine x) 是一款轻量级的 Web 服务器、反向代理服务器及电子邮件（IMAP/POP3）代理服务器。什么是反向代理？反向代理（Reverse Proxy）方式是指以代理服务器来接受 internet 上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给 internet 上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。 Nginx 入门详细安装方法请参考： https://github.com/dunwu/nginx-tutorial/blob/master/install-nginx.md

Asp.net SignalR 让实时通讯变得简单二--把SignalR寄宿到控制台程序中

阅读更多关于 Asp.net SignalR 让实时通讯变得简单二--把SignalR寄宿到控制台程序中

　　在 Asp.net SignalR 让实时通讯变得简单中思明分享了一个直接寄宿到IIS上的SignalR，SignalR同时也可以宿主在任何应用程序，包括控制台，客户端程序和Windows服务等，另外还支持Mono，这意味着它可以实现跨平台部署在Linux环境下。　　在我参考的博文 [Asp.net 开发系列之SignalR篇]专题一：Asp.net SignalR快速入门中第四条在桌面程序中如何使用Asp.net SignalR ，就是把SignalR寄宿在WPF客户端中，我已经亲自体验过了，挺好用的；大家有想了解的可以去研究下。今天我在这里就和大家分享一下直接把SignalR寄宿到控制台中。　　1、新建一个控制台应用程序 2、右击先建好的项目---> 选择管理NuGet程序包-->搜索 Microsoft.Owin.Cors 并安装-->搜索 Microsoft.AspNet.SignalR.SelfHost 并安装　　待安装好 Microsoft.AspNet.SignalR.SelfHost 后VS中会自动弹出readme.txt如下。里面详细介绍了如何把SignalR寄宿到控制台上的操作。　　3、我们可以按照readme.txt中的讲解。修改Program.cs如下： using Microsoft.AspNet.SignalR; using

Asp.Net WebApi 跨域设置

阅读更多关于 Asp.Net WebApi 跨域设置

跨越问题主要发生在客户端ajax请求时，为了安全设置，默认webapi是不允许ajax跨越请求的，不过有方法设置让支持跨越，我说说最常见的两种方法一、jquery jsonp 缺点：JSONP也有局限性，只能针对于Get请求不能用于POST请求 1、新建过滤器 Filters/JsonCallbackAttribute.cs using System.Net.Http; using System.Text; using System.Web.Http.Filters; namespace cms.Web { public class JsonCallbackAttribute : ActionFilterAttribute { private const string CallbackQueryParameter = " jsoncallback " ; public override void OnActionExecuted(HttpActionExecutedContext context) { var callback = string .Empty; if (IsJsonp( out callback)) { var jsonBuilder = new StringBuilder(callback); jsonBuilder.AppendFormat( " ({0})

$.ajax,axios,fetch三种ajax请求的区别

阅读更多关于 $.ajax,axios,fetch三种ajax请求的区别

Ajax是常用的一门与Web服务器通信的技术，目前发送Ajax请求的主要有4种方式：原生XHR jquery中的$.ajax() axios fetch 至于原生的XHR目前工作中已经很少去手写它了，前些年我们比较常用的是jquery的ajax请求，但是近些年前端发展很快，jquery包装的ajax已经失去了往日的光辉，取而代之的是新出现的axios和fetch，两者都开始抢占“请求”这个前端重要领域。本文结合自己的使用经历总结一下它们之间的一些区别，并给出一些自己的理解。 1.Jquery ajax 代码示例： $.ajax({ type:"GET", url:url, data:data, dataType:dataType success:function(){}, error:function(){} }) 以上代码很简单，我就不多解释了，这就是jquery对原生XHR的封装，另外还增加了jsonp的支持，让ajax请求可以支持跨域请求，但是要注意的是：jsonp请求本质不是XHR异步请求，就是请求了一个js文件，因此在浏览器的network面板中的xhr标签下看不到jsonp的跨域请求，但是在js标签下能看见。 jsonp请求示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

如何解决跨域问题

阅读更多关于如何解决跨域问题

解决跨域三种方法什么是跨域，为什么要解决跨域。根据浏览器的同源策略。当浏览器不能响应执行网站的脚本时候，首先想到第一个问题点是否存在跨域问题。就是所谓同源策略，何为同源就我们经常上网是通过网址访问网站。而网址就由 www(协议)，子域名、主域名，加端口号组成。当访问的地址的这几个部分不同就会产生跨域。通常由于端口的不同造成跨域问题。浏览器同源策略根据安全考虑。解决跨域问题有三种方法。包括有jsonp(只局限于get请求方式)、nginx配置代理模式、服务器端跨域共享CORS。一、jsonp解决跨域是javascript代理模式，它是实现原理是通过动态在Html页面中插入<script>标签,在发送带网址的请求，但只适用get请求。例如jquery实现方式 /**jquery实现方式/ $.ajax({ url:' http://www.xxx.com/login ', type:'GET', dataType:'jsonp',//请求方式为jsonp jsonpCallback:'callback', }) function callback(res) { console.log(res); } 二、nignx反向配置域名、端口实现原理：既然浏览器有同源策略规则，也属于一种安全策略，我们就必须规则。但是它不是http的一部分。我们只需要使用nginx配置一可以使用地址

原生JS简单封装JSONP跨域获取数据

阅读更多关于原生JS简单封装JSONP跨域获取数据

用原生JS封装一个简单的JSONP，主要是用来理解前端是怎么实现JSONP的。 JSONP跨域是借助<img><script>的src属性，<link>的href属性能够链接外部网站，来实现跨域请求数据。将跨域请求的链接和参数以链接的方式提交给服务器，同时在链接中附带本地接收JSONP数据函数的函数名，当服务器查找数据完毕后，调用该函数，并将数据以函数参数形式传出。首先，使用使用JSONP跨域，不是直接返回一个数据对象，而是本地向服务器提供一个可供调用的函数fn，由服务器调用，并跨域请求的数据对象注入fn的参数。也就是说，跨域请求数据，是将本地用来接受JSONP数据对象的函数的函数名提交给服务器，由服务器来调用。其次，因为网页中会频繁使用到JSONP，本地用来接收JSONP数据的函数将会有很多，从而导致代码冗余，占用资源。因此，采取以下方法接收JSONP跨域请求得到的数据： 1、在封装函数Fun中随机生成一个变量名fn； 2、将fn保存为封装函数Fun的属性(即：Fun[fn])，或者window的全局属性； 3、将fn提交给服务器做为本地接收JSONP函数的函数名； 4、定义本地接收JSONP数据的匿名函数，并将匿名函数赋值给封装函数Fun的属性fn(Fun[fn] = function(data){...})； 5、将匿名函数中接收到的data传出

处理ajax调用不了webService的问题

阅读更多关于处理ajax调用不了webService的问题

写一个webService做为后台，然后前台用ajax调用，无论怎么调用都报abort的错误。然后开始排查错误原因。 1、把之前项目中已经可以正常调用的代码复制、粘贴过来，然后把地址换成现在这个地址，发现报错abort。就说明是后台的问题了。 2、在试着把后台的代码复制到之前能够正常运行的后台上面，然后通过之前的webService的地址去调用这个接口，发现可以正常调用了，这说明是新建的这个webService的问题。 3、然后通过对比发现，在新的webService中，要添加一些配置才能够正常被调用，否则就会一直地报错。 4、修改web.config文件下面的<system.webServer>,在里面添加如下配置，就能正常的被调用了。 < add name ="Access-Control-Allow-Methods" value ="OPTIONS,POST,GET" /> < add name ="Access-Control-Allow-Headers" value ="x-requested-with,content-type" /> < add name ="Access-Control-Allow-Origin" value ="*" /> 5、附加完整的配置 < system.webServer > < httpProtocol > < customHeaders

openlayer3 加载geoserver发布的WFS服务

阅读更多关于 openlayer3 加载geoserver发布的WFS服务

转自原文 openlayer3加载geoserver发布的WFS服务 openlayers3调用GeoServer发布的wfs 1 参考一 1.1 问题 openlayer3加载WFS存在跨域问题，需要用jsonp解决，而jsonp需要用script加载，但加载有误，如图所示，读取cite:bou2_4p图层的GeoJSON 载入地址是这样的http://localhost:8080/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:bou2_4p&maxFeatures=20000000&outputFormat=application%2Fjson （与WMS不同，真正的发布地址并不是这个）在geoserver中看到，它输出的格式是json，但如果在js中调用会存在跨域的问题产生 1.2 调用代码在代码中，我将输出格式改变为javascript来解决jsonp。 // 参数字段 var wfsParams = { service : 'WFS' , version : '1.0.0' , request : 'GetFeature' , typeName : 'cite:bou2_4p', // 图层名称 outputFormat : 'text/javascript'

订阅 jsonp