vue前端跨域解决方案

为什么会出现跨域：

浏览器访问非同源的网址时,会被限制访问,出现跨域问题.

常见的跨域有三种：

jspn跨域，原理：动态生成script标签，通过script标签引入接口地址(因为script标签不存在跨域的)
cors跨域(后端开启) ：全称 “跨域资源共享”，原理：它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制
vue代理服务器proxy跨域：通过请求本地的服务器，然后本地的服务器再去请求远程的服务器(后端部署接口的服务器)，最后本地服务器再将请求回来的数据返回给浏览器(本地服务器和浏览器之前不存在跨域)
两个关键点：
本地服务器(利用node.js创建的本地服务器进行代理,也叫代理服务器)和浏览器之间不存在跨域
服务器和服务器之间不存在跨域

话不多说，直接上代码：

首先创建一个 vue.config.js文件

// 假设要请求的接口是：http://40.00.100.100:3002/api/user/add
module.exports = {devServer:{host:'localhost',  // 本地主机port:5000,  // 端口号的配置open:true,  // 自动打开浏览器proxy:{'/api': {   //  拦截以 /api 开头的接口target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加httpchangeOrigin: true,    //这里true表示实现跨域secure: false, // 如果是https接口，需要配置这个参数pathRewrite: {'^/api':'/'  //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/api/user/add'，直接写‘/api/user/add’即可}},// 假如又有一个接口是：http://40.00.100.100:3002/get/list/add// 那就再配置一个 get的，如下：'/get': {   //  拦截以 /get 开头的接口target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加httpchangeOrigin: true,    //这里true表示实现跨域secure: false, // 如果是https接口，需要配置这个参数pathRewrite: {'^/api':'/'  //这里理解成用‘/api’代替target里面的地址，}}// 调用的时候直接  /get/list/add  就可以了}}}// 注意：修改了配置文件后一定要重启才会生效;

我们可以利用axios的baseUrl直接默认值是 api，这样我们每次访问的时候，自动补上这个api前缀，就不需要我们自己手工在每个接口上面写这个前缀了
在入口文件里面配置如下：

import axios from 'axios'Vue.prototype.$http = axios
axios.defaults.baseURL = 'api'  // 后面发现，其实不加这个感觉也好像可以如果这配置 'api/' 会默认读取本地的域

如果只是开发环境测试，上面那种就足够了，如果区分生产和开发环境
就需要如下配置

分环境配置跨域：

创建一个 api.config.js 文件(其实随便命名都可以)

const isPro = Object.is(process.env.NODE_ENV, 'production')
// 如果是生产环境，就用线上的接口;
module.exports = {baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

然后在main.js 里面引入,这样可以保证动态的匹配生产和开发的定义前缀

import apiConfig from './api.config'Vue.prototype.$http = axios
import axios from 'axios'axios.defaults.baseURL = apiConfig.baseUrl

经过上面配置后，在dom里面可以这样轻松的访问,也不需要在任何组件里面引入axios模块了

  async getData(){const res = await this.$http.get('/api/user/add');console.log(res);},

小结：
代理跨域的主要方式是利用服务器请求服务器的方式避过跨域问题来实现的.大概的流程: 浏览器===>代理服务器===>目标服务器.

若有不对的地方，请不吝指出，同时也欢迎留言咨询，谢谢~

vue前端跨域解决方案相关推荐

node.js后端及Vue前端跨域解决方案
node.js后端及Vue前端跨域解决方案从目前我了解的情况来看,前后端跨域使用的方式有很多种,这里记录我使用最顺手的一种,即在后端使用cors跨域 node.js后端跨域解决方案先看后端的入口文 ...
9种常见的前端跨域解决方案
9种常见的前端跨域解决方案(详解) 2019.09.02 21:54 73879浏览一.什么是跨域? 在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制. ...
如何实现vue前端跨域，proxyTable解决开发环境前端跨域问题
如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题参考文章: (1)如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题 (2)https://www.cnblog ...
Vue 前端跨域的解决方案（心得记录）
背景: 今天面试一面和二面都还ok,三面是两个小姐姐(工作性质应该是外包驻场,所以有甲方来面),简历上巴拉巴拉的简单聊了一下,到了关键了,小姐姐说问一下基础的东西(这也是最怕的,毕竟Vue我之前用的挺 ...
WEB 前端跨域解决方案
跨域定义广义的定义:跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 1.) 资源跳转: 链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>. ...
Vue项目跨域解决方案与 vue.config.js 配置解析
为什么会出现跨域? 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说 ...
Vue的跨域解决方案
如何在vue里面优雅的解决跨域,路由冲突问题? 当我们在路由里面配置成一下代理可以解决跨域问题: proxyTable:{'/goods/*':{target:'http://localhost:30 ...
前端常见的跨域解决方案
一.什么是跨域跨域也称为非同源策略请求,就是去非同源地址获取数据的行为只要页面,向非同源地址,发出了ajax / fetch请求,此时就出现了跨域问题. 专业的解释是,两个不同源的服务去访问对方的 ...
前端跨域问题的解决方案
跨域是浏览器的一种安全策略,是浏览器自身做的限制,不允许用户访问不同域名或端口或协议的网站数据. 只有域名(主域名[一级域名]和二级域名).端口号.协议完全相同的时候,才允许通信. # 那么,如何解 ...
前端跨域问题的几种解决方案
前端跨域问题的几种解决方案参考文章: (1)前端跨域问题的几种解决方案 (2)https://www.cnblogs.com/xinxingyu/p/6075881.html 备忘一下.