在一个项目上想用NodeJS,在前端的JS(http://localhost/xxx)中ajax访问后端RestAPI(http://localhost:3000/….)时(Chrome)报错:

XMLHttpRequest cannot load http://localhost:3000/auth/xxx/xxx. Originhttp://localhost is not allowed by Access-Control-Allow-Origin.

本地测试解决方案:

  1. 使用Chrome插件:Allow-Control-Allow-Origin: *
  2. 为Chrome浏览器添加启动属性: --disable-web-security

jQuery解决方案:

使用 Ajax Cross Origin - jQuery plugin ajax跨域请求

NodeJS解决方案:

  • 方案一:Express
var express = require('express');
var app = express();
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
}); app.get('/auth/:id/:password', function(req, res) {
res.send({id:req.params.id, name: req.params.password});
}); app.listen(3000);
console.log('Listening on port 3000...');
var express = require('express');
var app = express(); app.get('/auth/:id/:password', function(req, res) {
res.header("Access-Control-Allow-Origin", "*"); //设置跨域访问
res.send({id:req.params.id, name: req.params.password});
}); app.listen(3000);
console.log('Listening on port 3000...');

参考: 
http://m.blog.csdn.net/blog/marujunyy/8852017 
http://www.tuicool.com/articles/vYBR3y

  • 方案二:
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:1234"});
res.write("你好啊!");
}
res.end();
});
server.listen(3000,"localhost",function(){
console.log("开始监听...");
});
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
//res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:1234"});
res.statusCode=200;
res.sendDate=false;
res.setHeader("Content-Type","text/plain");
res.setHeader("Access-Control-Allow-Origin","http://localhost:63342");
res.write("你好啊!");
}
res.end();
});
server.listen(3000,"localhost",function(){
console.log("开始监听...");
});

参考: 
http://www.jb51.net/article/57874.htm

AJAX 跨域 :Access-Control-Allow-Origin的更多相关文章

  1. 解决js ajax跨越请求 Access control allow origin 异常

    // 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");

  2. java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  3. 解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin.

    一:使用jsonp格式, 如jquery中ajax请求参数   dataType:'JSONP'. <html> <head> <title>title</t ...

  4. (转)AJax跨域:No 'Access-Control-Allow-Origin' header is present on the requested resource

    在本地用ajax跨域访问请求时报错: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ori ...

  5. ajax跨域问题Access-Control-Allow-Origin

    Access control allow origin直译过来就是"访问控制允许同源",这是由于ajax跨域访问引起的.所谓跨域就是,在a.com域下,访问b.com域下的资源:出 ...

  6. 浏览器同源策略与ajax跨域方法汇总

    原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...

  7. Access control allow origin 简单请求和复杂请求

    原文地址:http://blog.csdn.net/wangjun5159/article/details/49096445 错误信息: XMLHttpRequest cannot load http ...

  8. AJAX跨域POST发送json时,会先发送一个OPTIONS预请求

    我们会发现,在很多post,put,delete等请求之前,会有一次options请求. 根本原因就是,W3C规范这样要求了!在跨域请求中,分为简单请求(get和部分post,post时content ...

  9. Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

    同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源 ...

  10. 基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...

随机推荐

  1. Linux服务器集群系统(二)--转

    引用地址:http://www.linuxvirtualserver.org/zh/lvs2.html LVS集群的体系结构 章文嵩 (wensong@linux-vs.org) 2002 年 4 月 ...

  2. Calculate the formula

    Problem Description You just need to calculate the sum of the formula: 1^2+3^2+5^2+……+ n ^2.   Input ...

  3. 【开源项目6】介绍MenuDrawer这个牛x的控件,实现左右出菜单,上下出菜单

    现在很多应用都很潇洒的从左边屏幕手势一划出个左边的隐藏菜单,右边一划出个隐藏菜单,上边一划出个隐藏菜单,下边一划出个隐藏菜单.或者像android的API16左右的激活列表项的功能.很多人肯定都很着迷 ...

  4. c++的输入流基础知识

    cin是istream类的对象,它从标准输入设备获取数据,程序中的变量通过流提取符“>>”从流中提取数据.从流中提取数据时通常跳过输入流中的空白符   只有在输入完数据并按回车后,该行数据 ...

  5. maven的update project是什么意思

    一个是更新依赖,然后是clean projects,重新编译

  6. Umbraco(6)-Creating More Pages Using the Master - Part 2(翻译文档)

    创建一个Contact Us页面 我们将创建一个新的”联系我们“页面,在该页面我们将放置简单的联系信息.对于添加这个功能你可能想替换为一个完全成熟的形式. 一些有效的解决方案: 使用表面控制器构建自己 ...

  7. Table of Contents - JMS

    JMS Specification v1.1 JMS 基本概念 Message QueueBrowser 消息选择器 消息确认 ConnectionMetaData ExceptionListener ...

  8. SqlServer知识总结

    SqlServer查询表的列数 select count(*) from sysobjects a join syscolumns b on a.id=b.id where a.name='表名' 在 ...

  9. HTML5_注册表单的自动聚焦与占位文本

    首先看下面要使用HTML自动聚焦和占位文本的示例代码 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title> ...

  10. jquery实现点击页面空白隐藏指定菜单

    注意:dmenu是一个div的class名哦 代码如下 复制代码 $('html,body').click(function(e){  if(e.target.id.indexOf("dme ...