一、为什么会出现跨域的问题？

跨域：浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。
在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号(如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的。而axios是通过Promise实现对ajax技术的一种封装，也同样存在跨域问题。

二、解决方案

这里我就使用本机的开启两个不同的端口来测试。

未处理跨域前的报错

没有做跨域处理请求是这样的:

 axios.get('http://localhost:8080/getData').then(res => {console.log(res)}).catch(err => {console.error(err); })

跨域资源共享（CORS）
前端进行反向代理来解决跨域问题。原理图如下：

1、vue项目的端口是8080

2、自己电脑开启了一个8080的端口，请求/getData就会放回json数据。

3、配置代理

1.在vue2.0中

修改config文件夹下的index.js文件，在proxyTable中加上如下代码：

   proxyTable: {'/api': {target: 'http://localhost:8080',  //要解决跨域的接口的域名secure:false,           //如果是https接口，需要配置这个参数changeOrigin: true,  // 如果接口跨域，需要进行这个参数配置pathRewrite: {'^/api': ''  // 路径重写}},},

然后在请求中axios中这样写

 axios.get('/api/getData').then(res => {console.log(res)}).catch(err => {console.error(err); })

分析：

target后面的就是需要请求的网址的公共部分，然后用/api来代理这个，最后重写一些路径，请求的时候使用的我们的代理的api来作为前缀。
这个前缀我们可以自定义，proxyTable是对象，所以我们可以配多个代理。
跨域解决

2.在vue3.0中

vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建
新建一个vue.config.js，配置以下信息，同样可以解决。

module.exports = {   devServer: {proxy: {'^/api': {target: 'http://localhost:8080/',//接口的前缀ws:true,//代理websockedchangeOrigin:true,//虚拟的站点需要更管originpathRewrite:{'^/api':''//重写路径}}}}
}

小结：

changeOrigin: true ：开启代理：在本地会创建一个虚假服务器，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端就可以进行数据的交互。
api就是接口实际请求的前缀，去代理了我们的实际的接口前缀的公共部分，也就是协议+主机名+端口号
比如请求接口为localhost:8080/getData 我们只需要传入：getData
那么公共的域名就是localhost:8080,我们就是在请求接口的公共域名localhost:8080改为api/即可!
把项目运行起来可以看到接口请求的路径为 :localhost:8081/api/getData
而进过代理后，实际的请求路径是： localhost:8080/getData

vue如何解决axios请求前端跨域问题相关推荐

如何实现vue前端跨域，proxyTable解决开发环境前端跨域问题
如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题参考文章: (1)如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题 (2)https://www.cnblog ...
webpack+vue解决前端跨域问题
webpack+vue解决前端跨域问题参考文章: (1)webpack+vue解决前端跨域问题 (2)https://www.cnblogs.com/wei-dong/p/10689072.html ...
前端跨域请求get_解决前端跨域请求的几种方式
利用 JSONP 实现跨域调用说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问 ...
解决前端跨域的几种方法
解决前端跨域的几种方法了解跨域出现的原因解决跨域的几种方法想要解决跨域先要知道为什么会出现跨域跨域:指的是浏览器不能执行其他网站的脚本它是由浏览器的同源策略造成的是浏览器对javascr ...
前端交互之“解决前端跨域的三种方法”
1.什么是前端跨域? 跨域是浏览器为了安全而做出的限制策略:浏览器请求必须遵从同源测试: http://www.bilibili.com:8080:/anime/?key=calue路径键值对同协 ...
记录一次若依框架前端跨域访问 ruoyi -vue
Ruoyi -vue 若依框架前端跨域访问总的思路创建一个用于第三方平台使用的request拦截器,并定义一个新的path ,最后配置 deserver,其实网上也有很多对于我这样JAVA开发 ...
node.js后端及Vue前端跨域解决方案
node.js后端及Vue前端跨域解决方案从目前我了解的情况来看,前后端跨域使用的方式有很多种,这里记录我使用最顺手的一种,即在后端使用cors跨域 node.js后端跨域解决方案先看后端的入口文 ...
Nginx 代理解决前端跨域问题
目录一.什么是 nginx 二.nginx 的用途三.代理 1.正向代理 2.反向代理四.nginx.conf 配置文件的基本结构五.nginx 的内置变量六.nginx 解决跨域的原理七 ...
Vue 前端跨域的解决方案（心得记录）
背景: 今天面试一面和二面都还ok,三面是两个小姐姐(工作性质应该是外包驻场,所以有甲方来面),简历上巴拉巴拉的简单聊了一下,到了关键了,小姐姐说问一下基础的东西(这也是最怕的,毕竟Vue我之前用的挺 ...

vue如何解决axios请求前端跨域问题

一、为什么会出现跨域的问题？

二、解决方案

vue如何解决axios请求前端跨域问题相关推荐

最新文章

热门文章