在我的前端项目http://localhost:63342/replay.moqi.mobi/index.html
中访问expressjs的项目http://localhost:3000/blogs会出现跨域请求的问题,如下:

XMLHttpRequest cannot load http://localhost:3000/blogs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.

关于CORS,<pro express.js>书中38页介绍如下:

If you’re building an application (a REST API server) that serves requests coming from front-end clients hosted on different domains,you might encounter cross-domain limitations when making XHR/AJAX calls. In other words,browser requests are limited to the same domain (and port). The workaround is to use cross-origin resource sharing (CORS) headers on the server. If you don’t want to apply CORS headers to your server,then the JavaScript object literal notation with prefix (JSONP) is the way to go. Express.js has a res.jsonp() method that makes using JSONP a breeze.
■ Tip to find out more about CorS,go to http://en.wikipedia.org/wiki/Cross-origin_resource_sharing.

####简单粗暴的办法是在res中加上两个header项,如下:

/* GET blog listing. */
router.get('/',function(req,res,next) {
  res.header("Access-Control-Allow-Origin","*");
  res.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Content-Type,Accept");
  res.json(blogs);

});

使用curl -i http://localhost:3000/blogs测试没有问题。在前端中使用requirejs-json插件访问也没有问题:

define(['jquery','underscore','mustache','text!templates/nav.html','json!http://localhost:3000/blogs'],function ($,_,Mustache,navTemplate,blogPosts) {


###相关代码:
后端的变化:https://github.com/uniquejava/moqi.mobi.express/commit/047cf53795a84a72d37fe0824d76273b17f8d7a5
前端的变化:https://github.com/uniquejava/replay.moqi.mobi/commit/7fd313a43d9d67d90df71450efd25a3149885610

####其它:加一个middleware

app.use(function(req,Accept");
  next();
});

app.get('/',next) {
  // Handle the get for this route
});

app.post('/',next) {
 // Handle the post for this route
});

### 使用connect-cors (最终选择了这个)

详见https://github.com/expressjs/cors的 Usage部分

1. 安装依赖

$ npm install cors

2. 对所有的路由启用cors

var express = require('express'),cors = require('cors'),app = express();

app.use(cors());

app.get('/products/:id',next){
  res.json({msg: 'This is CORS-enabled for all origins!'});
});

app.listen(80,function(){
  console.log('CORS-enabled web server listening on port 80');
});

3. 对某个路由启用cors

var express = require('express'),app = express();

app.get('/products/:id',cors(),function(){
  console.log('CORS-enabled web server listening on port 80');
});

4. 更多请看Usage...

Expressjs 解决AJAX跨域请求 (CORS)的更多相关文章

  1. ios – 尝试向我们分配IP而不是localhost或home时,NSURLSession失败

    我有一台本地运行的服务器(我的IP是192.168.0.98),并且已经尝试使用一些网络代码来访问它.最初这是通过AFNetworking完成的,但我现在用这样的NSURLSession完成了它:然后我用这3个URL运行它:>http://localhost:8080/api–>作品.>http://127.0.0.1:8080/api–>作品.>http://192.168.0.98:8080/

  2. iOS 10.3:模拟器HTTPS localhost:SSL错误

    这适用于iOS10.2及更低版本,但升级到10.3后,当模拟器尝试通过HTTPS连接到运行在localhost上的开发服务器时,Xcode控制台会输出以下错误:打印出URLSessionDataTask返回的错误显示:参考:Apple:Developer:GuidesandSampleCode:TechnicalNoteTN2232:HTTPSServerTrustEvaluation要创建自签名

  3. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  4. KeyStone安装部署笔记

    KeyStone客户端:OpenStack身份服务API的命令行接口。OpenStack出于扩展性的考虑也支持多个region。下面的命令在regionOne创建了keystone的三种端点:为admin租户和用户申请令牌:最后验证admin租户和用户:输出结果验证了身份服务工作正常,Keystone安装部署成功。

  5. 如何将android客户端连接到我的笔记本电脑内的Apache服务器(php)的localhost?

    我的笔记本电脑中的localhost-127.0.0.1或android10.0.0.1中的localhost?>那么,如果我想从android访问localhost来调用PHP来运行?哪个ip地址/url我需要放在Android应用程序?我需要在httpconfig中为XAMPP修改任何内容吗?解决方法使用ipconfig在笔记本电脑中找到您的IP地址.在手机中使用该地址而不是127.0.0.1.

  6. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  7. 尝试从Android模拟器连接到我的REST服务器时连接被拒绝

    考虑以下android代码,请解决我的问题:在我的笔记本电脑上运行REST服务器..我可以从我的浏览器访问该服务器并获得正确的结果…在模拟器中,当我将URL传递为http://www.google.com时,我得到了正确的结果,但是当我使用我的localhosturl时,我得到连接拒绝…

  8. android – 为什么我的StringRequest永远在onErrorResponse方法?

    我正在尝试从Android中执行POST请求,以在PHPmyadmin中插入一些信息.我在用什么>Slim使连接和查询与数据库存储在PHPmyadmin.>XAMPP来模拟本地服务器.>Volley来消费Android的请求.Slimpost功能对我来说没有任何问题,因为如果我在Postman应用程序上使用POST模式,数据正被插入到数据库中.该URL可以接受两个由斜杠/分隔的参数.这里有一个例子

  9. Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

  10. 简单易懂的JSONP和CORS跨域方案详解

    这篇文章主要为大家介绍了简单易懂的JSONP和CORS跨域方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部