NODE.JS跨域问题的完美解决方案

这几天公司同事（前端）写页面的时候一直说拿不到想要的JSON，安卓iOS那边是可以拿到的，但他也是新手也不知道为什么只知道是js跨域问题，然后问我我也不懂前端我开始百度，

有人说是谷歌浏览器跨域要设置一下，然后我就在谷歌浏览器的目标后面加一个 --disable-web-security

但是后来发现依然报错，依然拿不到想要的数据。后来也不停的找找找也没有什么眉目。

直到今天百度了一下PHP的跨域启发了我，于是百度找到了node.js的跨域问题，最后我在 app.js 路由设置里面加了一段跨域代码 完美解决问题：

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.listen(8088);

以上所述是小编给大家介绍的NODE.JS跨域问题的完美解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Node.js设置CORS跨域请求中多域名白名单的方法

    CORS 说到CORS,相信前端儿都不陌生,这里我就不多说了,具体可以看看这篇文章. CORS,主要就是配置Response响应头中的 Access-Control-Allow-Origin 属性为你允许该接口访问的域名.最常见的设置是: res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Credentials', 'true'); // 允许服务器端发送Cookie数据 然而,这样的

  • node跨域请求方法小结

    本文介绍了node跨域请求,主要介绍了两种方法,一种是jsonp,另一种res.wirteHead,具体如下: 第一种:jsonp 参看用nodejs实现json和jsonp服务 第二种:res.wirteHead node部分 var http = require('http') var url = require('url') var querystring = require('querystring') var port = 9000 var jsonData = { 'name': '

  • nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)

    nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)

    准备工作: 1.安装nodejs ---还用我教了? 2.安装依赖包express4.x  点这里>>>nodeJS搭建本地服务器 3.安装vue-cli脚手架 点这里>>>vue-cli构建vue项目 这里强调一下,express是后端服务器,它是一个独立的服务器,vue启动的是前端服务器,vue-cli中已经集成了一个小型的express,这两个服务器是分开放的,但是它们都是基于nodejs的. nodeJS部分:这里我已经认为你搭建好了express服务器,并且能

  • 借助node实战JSONP跨域实例

    借助node实战JSONP跨域实例

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限制,其中有一方法就是JSONP. JSONP的基本思想:就是通过<script>的src,向服务器请求数据,且这不受同源策略限制(img和iframe的src也是如此):然后服务器将相应的数据放入指定的函数回调名中,返回给前端. 这,就实现了跨域请求信息. 如下图所示: 了解了JSONP的大体思路

  • Node.js配合node-http-proxy解决本地开发ajax跨域问题

    Node.js配合node-http-proxy解决本地开发ajax跨域问题

    情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题.  用到的技术:

  • NODE.JS跨域问题的完美解决方案

    NODE.JS跨域问题的完美解决方案

    这几天公司同事(前端)写页面的时候一直说拿不到想要的JSON,安卓iOS那边是可以拿到的,但他也是新手也不知道为什么只知道是js跨域问题,然后问我我也不懂前端我开始百度, 有人说是谷歌浏览器跨域要设置一下,然后我就在谷歌浏览器的目标后面加一个 --disable-web-security 但是后来发现依然报错,依然拿不到想要的数据.后来也不停的找找找也没有什么眉目. 直到今天百度了一下PHP的跨域启发了我,于是百度找到了node.js的跨域问题,最后我在 app.js 路由设置里面加了一段跨域代

  • JS跨域(Access-Control-Allow-Origin)前后端解决方案详解

    浏览器的同源安全策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收.同源:协议 + 域名 + 端口.所以,怎么才算跨域呢? 什么是跨域 什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.co

  • JS跨域之window.name实现的跨域数据传输

    一. window.name的性质 window.name有一个奇妙的性质,页面如果设置了window.name,那么在不关闭页面的情况下,即使进行了页面跳转location.href=...,这个window.name还是会保留. 我们可以在控制台做一下实验: // 打开浏览器输入URL:www.jb51.net //F12打开控制台 //在控制台中依次输入下面内容 //输入 window.name; //返回 '' //输入 window.name='test'; //返回 'test' /

  • JS跨域解决方案之使用CORS实现跨域

    JS跨域解决方案之使用CORS实现跨域

    引言 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. 和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resour

  • 详解js跨域原理以及2种解决方案

    详解js跨域原理以及2种解决方案

    1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名.协议和端口号的组合. 例如: 2.实现原理 在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问. 例如: 这种访问方式是不行的.但是如下方式,

  • JS跨域解决方案react配置反向代理

    JS跨域解决方案react配置反向代理

    跨域解决方案   jsonp(模拟get) CORS(跨域资源共享) 代理 iframe postMessage window.name WebSocket react的代理实现跨域 在配置在src/setupProxy.js文件,并通过npm安装http-proxy-middleware,代理中间件模块 创建 src/setupProxy.js 安装模块 npm i -S http-proxy-middleware    const {createProxyMiddleware: proxy}

  • 新版vue-cli模板下本地开发环境使用node服务器跨域的方法

    新版vue-cli模板下本地开发环境使用node服务器跨域的方法

    背景 我们都知道浏览器有一个既核心也最基本的安全功能,即同源策略.同源分别是:协议,域名,端口.如果浏览器访问服务器不同源的话,就会访问不到数据.那开发中常常访问的服务器不同源,那么可以借助一个服务器当做中介来访问需要访问的服务器从而获得数据.因为同源策略是浏览器的安全机制,而服务器之间是不受此限制的.之前vue-cli模板build文件夹下有dev-serve.js文件,可以在此文件中配置本地node服务器实现跨域,现在的模板下没有此文件,那我们该如何使用node跨域呢?不逼逼,上方法. 具体

  • React+Spring实现跨域问题的完美解决方法

    最近小编在学习react,在学习过程中遇到React+Spring实现跨域问题,下面小编记录了整个问题过程,给大家做个参考. react 跨域访问后台,默认是有跨域问题,并且火弧和谷歌浏览器,对跨域问题展示还不一样. 谷歌浏览器如下图: 此处状态是200,然而在Response却没有任何信息,如下图 然而火弧浏览器,对该问题的描述,就清淅得多, 火弧浏览器告诉我们,跨域了,关于react跨域的帖子,网上也有相关帖子,搜索到的方法,大约都是如下解决方式: 如果你是通过creat-react-app

  • 跨域请求的完美解决方法(JSONP, CORS)

    一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题.解决方法有JSONP,Flash等等. JSONP 我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe>.那就是说如果要跨域访问数据,就服务端只能把数据放在js格式的文件里.恰巧我们知道JSON可以简洁的描述复杂数据,而且JSON还被js原生支持,所以在客户端几乎可以随心所欲的处

  • js跨域问题之跨域iframe自适应大小实现代码

    复制代码 代码如下: <body onload="javascript: setHeight();"> <script> function setHeight(){ var dHeight = document.documentElement.scrollHeight; var t = document.createElement("div"); t.innerHTML = '<iframe id="kxiframeagent

随机推荐