Node.JS跨域请求配置方案

协议,端口,域名。只要这个3个中有一个不同就是跨域。同源策略的魅力撞墙...

请注意,本文编写于 120 天前,最后修改于 120 天前,其中某些信息可能已经过时。

今天在用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个中有一个不同就是跨域。 这里列举一个经典的列子:

协议跨域

端口跨域

域名跨域

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

二、跨域的解决方案

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

  1. 配置响应头

    在服务端响应头文件中配置 “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 属性中进行跨域调用。从而实现跨域请求。


添加新评论

已有 12 条评论

UtyIcpXh UtyIcpXh 回复 @UtyIcpXh

UtyIcpXh

UtyIcpXh UtyIcpXh 回复 @UtyIcpXh

UtyIcpXh

UtyIcpXh UtyIcpXh 回复 @UtyIcpXh

UtyIcpXh

UtyIcpXh UtyIcpXh 回复 @UtyIcpXh

UtyIcpXh

qbceHVpW qbceHVpW 回复 @UtyIcpXh

qbceHVpW

qbceHVpW qbceHVpW 回复 @UtyIcpXh

qbceHVpW

node雄起!实际上,学习就是不断积累的过程, 🍉 今天遇到的bug们,我或多或少的都有所耳闻。所以在三进三出之后,很迅速的就解决了 既然能力不够强,就应该用勤奋去勉励自己,只言片语也罢,让以后回想起这段日子,觉得很很棒就满足啦

platonic platonic 回复 @platonic

加油~小老弟

UtyIcpXh UtyIcpXh 回复 @platonic

UtyIcpXh

UtyIcpXh UtyIcpXh 回复 @platonic

UtyIcpXh

qbceHVpW qbceHVpW 回复 @UtyIcpXh

qbceHVpW