node+vue+express开发环境下接口数据传递中的跨域问题

跨域问题产生原因

原因

大部分浏览器自带的保护措施，限制用户在一个域名下请求另一个域名的数据

一、关于跨域

跨域对于前后端开发者来说，就像一块狗皮膏药，无论是面试还是开发中，都会经常遇到。

之所以出现跨域问题，是因为浏览器的同源策略，为了隔离潜在的恶意文件，为了防御来自歪门邪道的攻击，浏览器限制了从同一个源加载的文档或脚本与来自另一个源的资源进行交互。

前面我们提到了，前端跑在 8080 端口下，后端跑在 9002 端口下，这种情况就属于不同的源（域名不同，协议不同，端口不同），所以 8080 端口下的前端请求直接访问 9002 端口下的后端接口时就访问失败了。

vue前端解决办法

Nodejs 代理

在 Nodejs 出现之前，JavaScript 编写的程序通常需要在用户的浏览器上执行，Node.js 出现后，JavaScript 也能用于服务端编程了。Nodejs 一系列的内置模块使得程序可以脱离 IIS、Apache 这种 Web 服务作为独立的服务器执行。

我们使用 Nodejs 来解决跨域问题的思路就是，在本地创建一个虚拟服务器，对 8080 端口下的前端请求进行代理，同时接收 9002 端口下的服务器端响应，这样服务端和服务端进行数据的交互就不会出现跨域问题了。

第一步，配置 Nodejs 代理服务

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:9002', // 你请求的第三方接口
        changeOrigin: false, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: { // 路径重写，
          '^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.codingmore.top/v2/XXXXX这个地址的时候直接写成/api即可。
        }
      },
    },
}

第二步，配置前端访问请求路径

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_APP_BASE_API: '"/api"'
  // VUE_APP_BASE_API: '"http://localhost:9002"'
})

第三步，重启前端服务

node后端解决办法

方法1：设置express

var express = require('express');
var app = express();
//跨域问题解决方面
app.all('*',function (req, res, next) {
 res.header('Access-Control-Allow-Origin', 'http://localhost:8080');//仅支持配置一个域名
 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');
 res.header('Access-Control-Allow-Credentials',true)//允许客户端携带验证信息
　next();　
});

方法2：使用cors

npm install cors

//跨域问题解决方面
const cors = require('cors'); 
app.use(cors({
  origin: ['http://localhost:8080','http://www.baidu.com'],//可设置多个跨域域名
  credentials: true//允许客户端携带验证信息
}))

注意，这里得自己得域名必须带上www，否则照样不能实现跨域，因为浏览器去请求服务器时，是完整的域名，所以后端验证也应该是完整的域名。