NodeJS解决跨域问题：Access-Control-Allow-Origin

红太狼 2021-09-14 16:08 422阅读 0赞

# 今天在玩`vue-resource`时，后台使用`nodejs`来提供数据，由于需要跨域，在网上也找到了解决方法。  `vue-resource`代码(其实就是ajax技术)：  `this.$http.get({ url:"http://localhost:3000/getdata"}) .then(function (data) { console.log(data) },function (error) {});`  `nodejs`部分：  `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('/getdata', function(req, res) { res.send({id:req.params.id, name: req.params.password}); }); app.listen(3000); console.log('Listening on port 3000...');` #

## 前世今生 ##

在WEB应用普及的今天，个人信息（账号、COOKIE等）广泛应用于网页。浏览器**同源策略**保证了WEB环境的安全性。同源策略是说，在a.com域名下通过ajax或者XmlHttpRequest等方式访问b.com的资源时，是不被允许的。

然而在很多时候，出于业务的的需要，我们经常有类似的**跨域访问 **的需求。浏览器有一些支持跨域访问的标签，例如script,img等。有这样的需求，自然就衍生了一些解决办法。

比较普遍的是通过jsonp的方式来实现接口。

另外一个方式就是在服务器端配置，允许部分或者所有页面进行跨域访问。

JSONP方式

简单来说，jsonp返回的不是json数据，而且一段通过函数将json数据包起来的js代码。这样，就可以通过script标签来加载这段代码，实现任意服务器的访问。   
对于如下一个返回json数据的接口：

http://www.test.com/jsonServerResponse
     
      
       1

其对应的jsonp方式的用法如下，其中jsonpCallback是客户端实现的处理json数据的函数。

前端页面在调用接口时，需要以callback=jsonpCallback的形式，将本地实现的处理json数据的函数上传到服务器。跨域服务器实现相应的jsonp接口

http://www.test.com/jsonServerResponse?callback=jsonpCallback
     
      
       1

这个接口的返回数据如下

jsonpCallback({
       'msg':'this is json data'});
     
      
       1

可以看出，关键得在服务器端实现jsonp方式的接口，有了这些，客户端就可以自由的跨域了！

服务器端

另外一个办法，直接在服务器端，允许**某些来源、某些接口、某些方法以某些形式**被跨域调用。

nodejs express配置

app.all('/test', function(req, res, next) { 
        res.header("Access-Control-Allow-Origin", "*");
        res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
        res.header("Access-Control-Allow-Headers", "X-Requested-With");
        res.header('Access-Control-Allow-Headers', 'Content-Type');
        next();
    });
     
      
       1
       2
       3
       4
       5
       6
       7

### nginx配置 ###

然而添加了这些之后，仍然不好使。查了查，可能是要在nginx上也作设置，在nginx相应路径添加如下：

location ^~ /test {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'OPTION, POST, GET';
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With, Content-Type';
    }
     
      
       1
       2
       3
       4
       5
       6

之后重新加载nginx配置即可，大功告成。