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: {// PathsassetsSubDirectory: '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

请求链接就变成这样了：

最后，把数据打印出来，就可以了。。

Vue跨域问题及解决方案相关推荐

php vue 跨域请求数据6,Vue跨域请求问题解决方案过程解析
查看页面响应信息,提示跨域有问题 #### 二.解决上面跨域问题:根目录写入以下vue.config.js // vue.config.js module.exports = { devServer: ...
Vue跨域访问后端接口问题解决
VUE访问接口的时候,很可能出现跨域请求,从而被提供接口的服务器拒绝,下面这篇文章主要给大家介绍了关于Vue如何解决跨域问题的相关资料,需要的朋友可以参考下什么是跨域跨域指浏览器不允许当前页面的所 ...
JWT(跨域身份验证解决方案)
1. JWT是什么 JSON Web Token (JWT),它是跨域身份验证解决方案之一 2. 为什么使用JWT JWT的精髓在于:"去中心化",数据是保存在客户端的. 3. J ...
Vue跨域配置proxyTable问题
最近在做一个前后端分离的毕设,在前端向后端发送get请求时遇到了Vue跨域的问题. been blocked by CORS policy: No 'Access-Control-Allow-Orig ...
ajax跨域原理以及解决方案
ajax跨域原理以及解决方案参考文章: (1)ajax跨域原理以及解决方案 (2)https://www.cnblogs.com/bojuetech/p/5895767.html (3)https: ...
c#关于JWT跨域身份验证解决方案
c#关于JWT跨域身份验证解决方案参考文章: (1)c#关于JWT跨域身份验证解决方案 (2)https://www.cnblogs.com/dengbo/p/11672495.html 备忘一下.
Web学习之跨域问题及解决方案
Web学习之跨域问题及解决方案 javascript/jquery 浏览数:161 2017-5-8 在做前端开发时,我们时常使用ajax与服务器通信获取资源,享受ajax便利的同时,也知道它有限制: ...
到底什么是跨域？附解决方案
转载自到底什么是跨域?附解决方案什么是跨域要了解跨域,先要说说同源策略. 同源策略是由 Netscape 公司提出的一个著名的安全策略,所有支持 JavaScript 的浏览器都会使用这个策略. ...
第四节：跨域请求的解决方案和WebApi特有的处理方式
一. 简介前言: 跨域问题发生在Javascript发起Ajax调用,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中的资源, 除非目标服务器明确地告知它允许跨域调用. ...

Vue跨域问题及解决方案

Vue跨域问题及解决方案相关推荐

最新文章

热门文章