vue解决跨域方法

什么是跨域

  跨域指浏览器不容许当前页面的所在的源去请求另外一个源的数据。源指协议，端口，域名。只要这个3个中有一个不一样就是跨域。 这里列举一个经典的列子：

#协议跨域
http://a.baidu.com访问https://a.baidu.com； #端口跨域 http://a.baidu.com:8080访问http://a.baidu.com:80； #域名跨域 http://a.baidu.com访问http://b.baidu.com； 

  如今不少公司都是采用先后分离的方式开发。那么出现常常和会跨域打交道。我这里整理平常开发中解决跨域的几种方案。咱们前端使用的Vue，后端使用的NodeJs。

解决方案

proxyTable

  这里vue脚手架生成的标准项目为准。通常在项目config目录下面有个index文件。里面格式以下：

'use strict' const path = require('path') module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://localhost:7001',//后端接口地址 changeOrigin: true,//是否容许跨越 pathRewrite: { '^/api': '/api',//重写, } } }, host: '192.168.0.104', port: 8081, autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, useEslint: true, showEslintErrorsInOverlay: false, devtool: 'eval-source-map', cacheBusting: true, cssSourceMap: false, }, } 

  上面配置中，咱们根据实际状况只须要修改proxyTable对于配置便可。假设我后端请求地址是http://localhost:7001，全部api的接口url都以/api开头。因此首先须要匹配全部以/api开头的.而后修改target的地址为http://localhost:7001。最后修改pathRewrite地址。将前缀 '^api' 转为 '/api'。若是自己的接口地址就有 '/api' 这种通用前缀，就能够把 pathRewrite 删掉。注意这个方式只能在开发环境中使用。

CORS

  CORS即跨源资源共享，它定义了一种浏览器和服务器交互的方式来肯定是否容许跨域请求。它是一个妥协，有更大的灵活性，但比起简单地容许全部这些的要求来讲更加安全。可是CORS也具备必定的风险性，好比请求中只能说明来自于一个特定的域但不能验证是否可信，并且也容易被第三方入侵。 这里通常须要后端配合,开启cors。通常各类语言都有相似的包。好比NodeJS的koa2-cors

var koa = require('koa'); //npm install --save koa2-cors var cors = require('koa2-cors'); var app = koa(); //开启 app.use(cors()); 

这个方式解决的跨越问题支持开发和生产环境。可是有必定的安全性问题。

Nginx

  当咱们明白跨越的含义以后。只要解决了'源'的问题。那么跨越也就不存在了。这里咱们便会想到proxy，同时也会想到Nginx。

咱们只须要在部署静态资源配置下面加上红框里面的配置就能够了。同时这个方法支持开发环境和生产环境。

后端程序代理

  固然上面2个方法都须要后端的配合和须要修改服务器配置。全部还有一种方法不须要他们配合 ，咱们本身就能够作到。就是咱们本身启一个后端程序作代理。而后把全部的请求转发到服务器。这里要用到node的一个包http-proxy-middleware。关键代码(express)以下

  

用Vue-cli脚手架搭建了个demo,先后分离就有跨域问题的出现。

vue-clie搭建demo步骤（传送门）：https://www.cnblogs.com/wangenbo/p/8487764.html

我本身在网上找了2个接口作测试：

CSDN：https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false

掘金：https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1

安装模块axios进行ajax请求，直接请求，确定显示跨域，没法请求。

 ===============    如下为npm run dev 跨域的解决方法    ===============

脚手架Vue-cli已经帮咱们留好了接口

参考这篇文章才知道：https://blog.csdn.net/qq_31201781/article/details/78778193

在config目录下的index.js文件，有个参数：

proxyTable:{}

因此，我把参数添加成：

原来接口：

CSDN：https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false

掘金：https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1

请求连接就变成这样了：

最后，把数据打印出来，就能够了。。

===============    以上为npm run dev 跨域的解决方法    ===============

 

 

===============    如下为npm run build 跨域的解决方法    ===============

咱们要打包上线：就用npm run build会打包成dist文件

但发到线上，就得用nginx解决跨域。

首先，下载nginx

https://blog.csdn.net/biaoge0310/article/details/78900538

入门命令：

　 在ngix文件目录下执行如下命令

　　start nginx　　开启ngix

　　nginx -s quit　 退出　

　　nginx -s reload 重启

        nginx -t 检查配置文件是否成功 

而后：进入nginx/conf目录下的，找到nginx.conf文件

添加以下配置：

启动ngix服务器： start nginx

输入网址：http://localhost:8099

完美！！！！打包后也解决了。。

===============    以上为npm run build 跨域的解决方法    ===============