文档章节

Expressjs 解决AJAX跨域请求 (CORS)

cyper
 cyper
发布于 2015/11/25 17:23
字数 486
阅读 171
收藏 2

在我的前端项目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, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

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

app.post('/', function(req, res, 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', function(req, res, 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')
  , cors = require('cors')
  , app = express();

app.get('/products/:id', cors(), function(req, res, 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');
});

4. 更多请看Usage...

 

© 著作权归作者所有

共有 人打赏支持
cyper

cyper

粉丝 58
博文 685
码字总数 143161
作品 0
武汉
前端工程师
前端筑基篇(一)->ajax跨域原理以及解决方案

说明 本文内容较老,而且已经不再更新,最新更新请移步 http://www.jianshu.com/p/82b82d5dd1ea 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 ...

撒网要见鱼
2016/09/21
0
0
ajax post跨域解决方案

概述 CORS能做什么: 正常使用AJAX会需要正常考虑跨域问题,所以伟大的程序员们又折腾出了一系列跨域问题的解决方案,如JSONP、flash、ifame、xhr2等等。 本文介绍的CORS就是一套AJAX跨域问题...

进击的程序员
2014/02/20
0
1
ajax跨域,这应该是最全的解决方案了

前言 搬运的历史文章 从刚接触前端开发起,这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于...

dailc
07/01
0
0
AJAX POST&跨域 解决方案 - CORS

 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不...

zyt_1978
2016/03/28
64
0
单页面应用,如何验证用户呢?

https://github.com/lifesinger/lifesinger.github.com/issues/184 这里介绍了什么是单页面应用。。 现在,我用ajax 跨域与服务器后台进行交互, ajax 的get 请求,可以用jsonp 来解决跨域,...

change_solider
2014/08/28
569
1

没有更多内容

加载失败,请刷新页面

加载更多

多线程

1. 多线程概念。并发和并行的概念。 多线程指的是一段时间内cpu同时执行多个线程。一个程序至少运行>=1个进程,进程就是运行中的程序,而一个进程至少运行>=1个线程,线程是操作系统能调度的...

鱼想吃肉
5分钟前
0
0
HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
30分钟前
1
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
今天
1
0
php foreach

<?php// 数组的引用$a=array(1,2,3,4,5);foreach($a as $key=>&$value){$value=$value*2;}print_r($a);echo " $key -------------------$value\r\n";/** * ...

小张525
今天
1
0
12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部