转载自: http://xfhnever.com/blog/2014/08/14/nodejs-crossdomainaccess/
今天在使用ajax(http://localhost:8080%EF%BC%89%E8%B0%83%E7%94%A8nodejs%E5%86%99%E7%9A%84restfulAPI(http://localhost:3000%EF%BC%89%E6%97%B6%EF%BC%8C%E6%8A%A5%E4%BA%86%E5%A6%82%E4%B8%8B%E4%B8%80%E4%B8%AA%E9%94%99%E8%AF%AF%EF%BC%9A
XMLHttpRequest cannot load http://localhost:3000/mock/items.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed access.
晚上说不能跨域访问,完全不懂这个概念啊,所以简单介绍一下。
解决方案
首先给大家介绍一下这个问题的解决方案,我是在node代码中设置跨域访问。
var app = express();
//设置跨域<strong>访问</strong>
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();
});
把Access-Control-Allow-Origin设置为‘*’,表示任意origin可以访问该API. 在实际应用中这样是不安全的,需要制定具体的origin。
当然也可以只对某些url设置跨域访问:
router.get('/', function(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.send('respond with a resource');
});
何为跨域
域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理。
跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见,比如说通过style标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Web font 加载字体文件等等。默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy)。
同源策略:如果两个页面的协议、域名和端口是完全相同的(IE的同源策略不包含端口),那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同,则还可以通过设置document.domain 属性将它们认为是同源的。
出于安全性考虑,浏览器将不允许跨域页面间的JS相互操作,如:主页面和跨域IFrame之间的JS操作,也不允许XMLHttprequest请求跨域内容。
在浏览器中不能直接来跨域访问,而在服务器端没有跨域安全限制。
其他解决方法
-
主域名相同的跨域情形
设置document.domain属性。如果想做到数据的交互,那么www.aa.com和book.aa.com必须由你来开发才可以。可以将book.aa.com用iframe添加到 www.aa.com的某个页面下,在www.aa.com和iframe里面都加上document.domain = “aa.com”,这样就可以统一域了,可以实现跨域访问。就和平时同一个域中镶嵌iframe一样,直接调用里面的JS就可以了。
-
HASH传值
当两个域不同时,如果想相互调用,那么同样需要两个域都是由你来开发才可以。用iframe可以实现数据的互相调用。解决方案就是用window.location对象的hash属性。hash属性就是http://domian/web/a.htm#dshakjdhsjka 里面的#dshakjdhsjka。利用JS改变hash值网页不会刷新,可以这样实现通过JS访问hash值来做到通信。不过除了IE之外其他大部分浏览器只要改变hash就会记录历史,你在前进和后退时就需要处理,非常麻烦。不过再做简单的处理时还是可以用的。大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里,a通过JS修改iframe的hash值,b里面做一个监听(因为JS只能修改hash,数据是否改变只能由b自己来判断),检测到b的hash值被修改了,得到修改的值,经过处理返回a需要的值,再来修改a的hash值(这个地方要注意,如果a 本身是那种查询页面的话比如http://domian/web/a.aspx?id=3,%E5%9C%A8b%E4%B8%AD%E7%9B%B4%E6%8E%A5parent.window.location%E6%98%AF%E6%97%A0%E6%B3%95%E5%8F%96%E5%BE%97%E6%95%B0%E6%8D%AE%E7%9A%84%EF%BC%8C%E5%90%8C%E6%A0%B7%E6%8A%A5%E6%B2%A1%E6%9C%89%E6%9D%83%E9%99%90%E7%9A%84%E9%94%99%E8%AF%AF%EF%BC%8C%E9%9C%80%E8%A6%81a%E6%8A%8A%E8%BF%99%E4%B8%AA%E4%BC%A0%E8%BF%87%E6%9D%A5%EF%BC%8C%E6%89%80%E4%BB%A5%E4%B9%9F%E6%AF%94%E8%BE%83%E9%BA%BB%E7%83%A6%EF%BC%89%EF%BC%8C%E5%90%8C%E6%A0%B7a%E9%87%8C%E9%9D%A2%E4%B9%9F%E8%A6%81%E5%81%9A%E7%9B%91%E5%90%AC%EF%BC%8C%E5%A6%82%E6%9E%9Chash%E5%8F%98%E5%8C%96%E7%9A%84%E8%AF%9D%E5%B0%B1%E5%8F%96%E5%BE%97%E8%BF%94%E5%9B%9E%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%86%8D%E5%81%9A%E7%9B%B8%E5%BA%94%E7%9A%84%E5%A4%84%E7%90%86%E3%80%82
-
JS脚本植入
通过页面动态加载<script>标签实现,该标签的SRC属性设置为跨域请求的URL地址,返回的内容为method(…)形式,其中method为页面内的JS回调函数,通过执行该函数来实现改变。
-
JQuery实现
function jsonpajax_1() { $.ajax({ url: "http://192.168.1.105:8123/Handler.ashx?callback=?", type: "get", dataType: "jsonp", jsonp: "callback", success: function(data) { var tt = ''; $.each(data, function(k, v) { tt += k + ":" + v + "<br/>"; }); $("#divmessage").html(tt); } }); }
此时,跨域的Web1中的ashx文件数据提供要改一下:
string callback = context.Request.Params["callback"];
context.Response.Write(callback+"("+strJson+")");
jsonp的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
如果设为dataType: ‘jsonp’, 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问
JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,
我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。
这种跨域的通讯方式称为JSONP。
相关推荐
cocos http跨域访问nodejs
使用nodeJs构建请求服务,前端页面进行访问,可以跨域请求
情景: 前后端分离,本地前端开发...3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题。 用到的技术: 1. nodejs搭建本地http服务器 2. 应用node-http-proxy,做
// 带有 www. 前缀的是可能被 CDN 加速的前端静态网页的托管服务器地址,// 没有 www. 前缀的是不在 CDN 后面因而不会被 CDN 延时 6
准备工作: 1.安装nodejs —还用我教了? 2.安装依赖包express4.x...nodeJS部分:这里我已经认为你搭建好了express服务器,并且能在浏览器中访问到 1.在express目录下,安装cors包1.npm install cors –save 2. //
详细介绍ArcGIS JS API跨域配置 介绍Proxy 代理不同web服务器环境部署和调用
直接打开html文件,是以file:///方式打开的,这种方式很多时候会遇到跨域的问题,因此我们一般会搭建一个简易的本地服务器,来运行测试页面。 一、构建静态服务器 1、使用express模块 建立个js文件,命名server,...
考虑设置一些CORS中间件,以避免浏览器跨域问题。 ###步骤2:建立唯读端点 这些端点将返回数据(请参见下文) 这些端点只能通过GET请求访问(只读) #### GET /name返回:您在JSON对象中的名称(例如Joe ...
CORS,主要就是配置Response响应头中的 Access-Control-Allow-Origin 属性为你允许该接口访问的域名。最常见的设置是: res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-...
需要重新连接以通知套接字Google Oauth 400 redirect_uri_mismatch错误请确保更新客户端ID客户端密钥并将网址添加到授权JavaScript来源授权的重定向URI 来自参考课程该项目的文件app.js cors:允许跨域访问express-...
因为邮箱问题很痛苦2019:6-9〜6-18 请先安装nodejs 10 +,mongodb服务器,nodemon,vue cli 3 说明 admin后台界面 服务器整个项目的服务端...cors作跨域访问 bcrypt用于对密码进行加密处理 http-assert用于错误处理 变
//跨域访问 划词翻译 docker 设计理念 当一个问题的复杂度大到一个小团队(参考亚马逊的two-pizza team理念)都无法承接的时候,我们需要考虑将其拆分成多个系统或应用,当一个问题的复杂度大到一个工程师在日常工作...
考虑设置一些CORS中间件,以避免浏览器跨域问题。 ###步骤2:建立唯读端点 这些端点将返回数据(请参见下文) 这些端点只能通过GET请求访问(只读) #### GET /name返回:您在JSON对象中的名称(例如Joe ...
3.1.0 /项目已从会话认证替换令牌认证,更好的支持跨域用户认证。 3.1.1 /修复PC页面访问的重定向问题。 技术栈 觉得好的欢迎点个star ^ _ ^。 前端:Express&EJS&ES6&Less&Gulp 初期:Express&SocketIO&...
CAS Micro Central Authentication Service based nodejs and mongodb. 待更新 基于nodejs、mongodb的微型CAS系统 说明 由于公司会员系统数据库在阿里云的MySql上,业务系统使用过多,不...跨域请访问cross-orign分支
1网页显示sandbox-1网页在沙盒1上从nginx获取html和javascript 在网络浏览器上运行JavaScript 访问sandbox-2 nodejs脚本获取沙盒2域Cookie 发出沙盒1域Cookie 将Cookie信息插入网页,并在Web浏览器上显示跨域Cookie...
前言 ...现在主流的前端框架都是托管在nodejs上,是通过axios来访问后端API,可以通过配置axios的代理配置(proxyTable)来实现跨域访问. 那么我们的JS运行在MVC上,托管在.net core上..那咋办呢?..没有
oss bucket配置跨域手动 修改里的配置配置./router.js 开始启动 1,我 2,节点app.js 演示 访问element-ui演示,localhost:2050 / demo / index.html, 原生localhost:2050 / demo / index2.html