node后端与Vue前端跨域处理方法详解

一、 前言

在前后端分离的开发模式中，前端Vue与后端Node进行沟通交互涉及到跨域问题。下面我们来详细讲解node后端与Vue前端跨域处理方法。

二、 跨域原理

同源策略（Same Origin Policy）要求网页只能访问与本网页同一个域名、端口、协议的网页。也就是说，一个源的的脚本仅能读写属于该源的窗口和文档。如果读写的目标不是同源的，就会出现跨域问题。

三、 跨域解决方法

1. JSONP

JSONP（JSON with Padding）是解决跨域问题的最简单方法。

通过动态添加 script 标签的方式，让服务端返回的数据包装在指定的 padding 函数中，再由前端解析在页面中使用。

例如：

<script>
  function callback(data) {
    console.log(data)
  }
</script>

<script src="http://www.example.com/data?callback=callback"></script>

这里的 callback 在服务端返回的数据中被自动替换成了前端定义的 callback 函数。

JSONP 的缺点在于只能支持 GET 请求，无法支持 POST 请求，还有安全隐患。

1. CORS

CORS（Cross-origin resource sharing）可以让浏览器在请求时，自动识别是否可以跨域，从而实现跨域请求。

在 Node.js 中，只需要在响应头中指定 Access-Control-Allow-Origin 即可。

例如，需要允许指定域名的请求跨域：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://www.example.com')
  next()
})

也可以允许所有域名的请求跨域：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  next()
})

CORS 的优点在于支持全部 HTTP 方法，安全且简单。但缺点在于会产生额外的 OPTION 请求，对于静态资源的访问会产生额外的流量。

四、 示例说明

1. JSONP 示例

在服务端 Node.js 中，有一个数据接口：

router.get('/data', function(req, res, next) {
  let data = {
    name: 'Tom',
    age: 18,
  };
  let callback = req.query.callback;
  res.send(callback + '(' + JSON.stringify(data) + ')');
});

在前端 Vue 中，添加一个 script 标签，指定接口地址和 callback 函数：

<script>
  function callback(data) {
    console.log(data)
  }
</script>

<script src="http://www.example.com/data?callback=callback"></script>

现在在浏览器中打开 Vue 页面，就可以看到打印出的数据了。

1. CORS 示例

在服务端 Node.js 中，要允许跨域请求：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
  if (req.method == 'OPTIONS') {
    res.send(200);
  } else {
    next();
  }
});

然后在前端 Vue 中访问该接口：

axios.get('http://www.example.com/data').then(res => {
  console.log(res.data)
})

现在在浏览器中打开 Vue 页面，就可以看到打印出的数据了。

五、 总结

使用 JSONP 或 CORS 都可以解决跨域问题，选择哪种方式要根据自己的情况进行判断。对于静态资源的访问建议使用 CORS，对于数据接口的访问建议使用 JSONP。