Node.JS跨域请求配置方案

今天在用node开发的过程中，再次遇到同源策略的问题：
在客户端调用服务端获取数据时，Chrome 浏览器中报错如下：

Access to XMLHttpRequest at 'http://localhost:3000/getmessage' from origin 'http://localhost:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

看着红了一片的提示，才服务端的跨域问题还没解决。码下此篇，引以为戒。

一、对跨域的理解

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。协议，端口，域名。只要这个3个中有一个不同就是跨域。这里列举一个经典的列子：

协议跨域

由http://a.baidu.com 访问→https://a.baidu.com；

端口跨域

由http://a.baidu.com:8080 访问 http://a.baidu.com:80；

域名跨域

由http://a.baidu.com 访问→ http://b.baidu.com；

现在很多项目都是采用前后分离的方式开发。在开发的过程中，我们难免经常和跨域打交道。我这里整理日常开发中解决跨域的几种方案。我们前端使用的Vue，后端使用的NodeJs。

二、跨域的解决方案

解决跨域问题常用的有三种方法：

配置响应头

在服务端响应头文件中配置 “Access-Control-Allow-Origin” 属性。
这种方案是最简便易操作的。

以 node.js 为例。即在 app.js 文件中添加如下代码: 切记：写在路由使用(use)之前

/*修改服务端代码，进行全路由配置，允许跨域请求*/var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
// var proxy = require('http-proxy-middleware')var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');var app = express();/*从这里开始设置以下代码*/
app.all('*', function(req, res, next){res.header('Access-Control-Allow-Origin',  '*');res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, yourHeaderFeild');res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');if (req.method === 'OPTIONS'){res.send(200);}else{next();}
});

第二种设置方法，写法不一样，原理相同

app.options("/*", function(req, res, next) {res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');res.sendStatus(200);
});app.all('*', function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");next();
});

3.使用代理

代理就是使用一个中转站，客户端不直接对服务端发送请求，而是通过访问代理，代理去从服务端获取数据，以这种方式绕过浏览器端的跨域验证。达到跨域请求的目的。

这里要用到node的一个包http-proxy-middleware。关键代码(express)如下

//开启跨域请求 以中间件代理 step1
var proxy = require('http-proxy-middleware')
//跨域请求 step2   使用代理
var app = express();
app.use('/api',proxy({target:"http://localhost:3000/",changOrigin:true
}));

2.使用 JSONP 模式

受同源策略影响，不被允许跨域请求。但是 script 的 src 属性却允许访问跨域脚本。JSONP 模式就是利用这个原理，服务端请求返回的不再是单纯的 JSON 数据，而是包含调用其他某个 JS 脚本的 JSONP 格式数据，最终在 src 属性中进行跨域调用。从而实现跨域请求。

Node.JS跨域请求配置方案相关推荐

Node.js跨域请求解决方案
Node.js跨域请求解决方案一.缘由: 初到公司,老大让去解决之前项目客户提出的一个小问题,对某一模块进行访问验证,之前的项目是PHP做的,对此不了解,因此不打算先学习PHP再去解决问题,考虑到客 ...
Vue.js跨域请求配置、Node.js设置允许跨域
Vue跨域配置在Vue项目目录中打开config/index.js,在proxyTable中添写如下代码: // 跨域处理proxyTable: {'/api': { // 匹配所有以 '/api' ...
JS跨域请求解决方案-CORS
文章目录 JS跨域请求解决方案-CORS 1.JS跨域请求测试JavaScript的跨域请求(失败) 2. 跨域解决方案CORS 普通实现方法 springMVC的跨域请求注解 3.分布式Id解决方 ...
js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式表单POST方式服务器代理 Html5的X ...
django允许跨域请求配置
2019独角兽企业重金招聘Python工程师标准>>> django允许跨域请求配置下载corsheader pip install django-cors-headers 修改s ...
Nginx 指定多个域名跨域请求配置
nginx指定多个域名跨域请求配置什么是跨域假设我们页面或者应用已在 http://www.test1.com 上了,而我们打算从 http://www.test2.com 请求提取数据.一般情况 ...
静态网页使用Node.js跨域代理服务
1. 需求背景公司网站的本地开发版之前一直都是部署在本地电脑上Tomcat容器里的,好处就是本地搭建服务器环境接口无需做跨域请求处理,坏处就是后台代码的每次更新都需要拷贝一份至我的电脑覆盖,并且本地 ...
node.js跨域问题
这几天公司同事(前端)写页面的时候一直说拿不到想要的JSON,安卓iOS那边是可以拿到的,但我和都是新手也不知道为什么只知道是js跨域问题,然后我也不懂前端我开始百度, 有人说是谷歌浏览器跨域要设置一 ...
yii2 跨域请求配置_如何在SpringBoot应用中实现跨域访问资源和消息通信？
允许跨域访问 CORS ( Cross Origin Resource Sharing,跨域资源共享)机制允许Web应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行.浏览器支持在API容器中 ...

Node.JS跨域请求配置方案

一、对跨域的理解

二、跨域的解决方案

Node.JS跨域请求配置方案相关推荐

最新文章

热门文章