前后端分离的项目中跨域问题的处理

作者: Jancaelm 分类: Vue.js 发布时间: 2017-09-02 14:38

在一个前后端分离的项目(事实上并非仅如此)中,我们在对API进行请求时经常会遇到跨域的问题。通常请求返回以下错误信息:

XMLHttpRequest cannot load http://localhost:3000/api/test. No 'Access-Control-Allow-Origin' header is present on the requested resource.

首先,分析这个错误的原因:

什么是跨域?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。
所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子:
http://www.123.com/index.html 调用 http://www.123.com/server.PHP (非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

那么如何解决呢?


node后端的处理


  1. 我们可以在node后端进行请求头的设置来解决
    代码如下:(在app.js中插入)

    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); /让options请求快速返回/
      }
      else {
        next();
      }
    });
    
  2. 使用cors
    使用方法:

    在express项目下面
    执行npm install cors
    然后在app.js里面
    var cors = require('cors');
    app.use(cors());

前端的处理


其实重点还是推荐后端来处理跨域问题,毕竟我觉得这才是问题的根本。
那么前端,该如何解决?

  1. config/index.js中配置proxyTable来转发请求,具体代码如下
    proxyTable: {
          '/api': {
            target: 'http://news-at.zhihu.com',
            changeOrigin: true,
            headers: {
              Referer: 'http://news-at.zhihu.com'
            }
          }
        },
    

    这么做虽然可以解决跨域请求的问题,但是!但是!但是!如果将项目打包以后,proxyTable就失效了,因为proxTable是运行在node服务上的

  2. 使用代理

发表评论

电子邮件地址不会被公开。 必填项已用*标注