axios实现跨域三种方法_跨域的解决方案

axios实现跨域三种方法_跨域的解决方案Axios是不允许跨域访问的,别说跨域,跨端口都不行。例如某项目我本地vue前端frontEnd为`localhost:8888`,Java后台backEnd为`localhost:8889`。这个时候就有两个方案了:-修改`frontEnd`前端,支持跨域(通过代理的形式,当然这种是`伪跨域`,但是挺有用,前提是后端不限制即可)。-修改`backEnd`后台,支持跨域(同时限制可跨域名,不在本文讨论范围,且看过往处理方式)。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

问题背景

Axios是不允许跨域访问的,别说跨域,跨端口都不行。例如某项目我本地vue前端frontEnd为localhost:8889,Java后台 backEnd为localhost:8888

报错信息: Access to XMLHttpRequest at 'http://localhost:8888/cert/certCompany/list2' from origin 'http://localhost:8889' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
在这里插入图片描述
axios请求代码

axios.post('http://localhost:8888/cert/certCompany/list2',JSON.stringify(this.searchParam))
	  .then(function (response) { 
   
	    console.log(response.data);
	  })
	  .catch(function (error) { 
   
	    console.log(error);
	  });

这个时候就有两个方案了:

解决方案

main.js

引入axios

//引入axios by zhengkai.blog.csdn.net
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'  //自动附加在所有axios请求前面,则可以省略/api,直接写'/xxxx/xxx'。否则需要设置'/api/xxxx/xxx'
config.index.js

改造proxyTable部分,引入虚拟代理 ,请求target这个地址的时候直接写成/api即可。

dev: { 
   
    env: require('./dev.env'),
    port: 8889,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { 
   
       //axios跨域改造 by zhengkai.blog.csdn.net
      '/api': { 
   
        target:'http://localhost:8888/cert/', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{ 
     // 路径重写,
          '^/api': ''  // 替换target中的请求地址,也就是说/api=/target,请求target这个地址的时候直接写成/api即可。
        }
      }
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
业务.vue

修改请求为/api封装开头(但是如果你的借口包含/api的关键字的话,建议使用其他关键字)

//axios跨域请求改造 by zhengkai.blog.csdn.net
axios.post('/certCompany/list2',JSON.stringify(this.searchParam))
      .then(function (response) { 
   
        console.log(response);
      })
      .catch(function (error) { 
   
        console.log(error);
      });

验证效果

请求不报错,没有烦人的No 'Access-Control-Allow-Origin' header is present on the requested resource.报错。
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194644.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • TCP的拥塞控制_假设tcp拥塞控制算法中

    TCP的拥塞控制_假设tcp拥塞控制算法中在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络性能就要变坏,这种情况就叫做网络拥塞。在计算机网络中数位链路容量(即带宽)、交换结点中的缓存和处理机等,都是网络的资源。若出现拥塞而不进行控制,整个网络的吞吐量将随输入负荷的增大而下降。当输入的负载到达一定程度吞吐量不会增加,即一部分网络资源会丢失掉,网络的吞吐量维持在其所能控制的最大值,转发节点的缓存不够大这造成分…

  • python df.iloc_python中loc

    python df.iloc_python中locstackoverflow原文:pandasilocvsixvslocexplanation;howaretheydifferent?在pandas0.20.0及以上版本,ix已经被loc和iloc取代了,因此不讨论它。前提,简单介绍一下它俩:–loc利用index的名称,来获取想要的行(或列)。–iloc利用index的具体位置(所以它只能是整数型参数),…

  • Java基础–单链表的实现[通俗易懂]

    Java基础–单链表的实现[通俗易懂]Java内部也有自己的链表–LinkedList,但是我们今天不是讨论LinkedList,而是自己来实现一个单链表,包括简单的增删查改,以及使用链表来实现栈和队列这两种数据结构,涉及的方面如下: 单链表的结构 单链表的基本操作 使用虚拟头结点的单链表 单链表实现栈 单链表实现队列 单链表的结构 一种链式存取的数据结构,单链表中的数据是以结点的形式存在,每一个结点…

  • pycharm2020.3.2激活码_在线激活

    (pycharm2020.3.2激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • 使用 SSHFS 挂载远程的 Linux 文件系统及目录

    使用 SSHFS 挂载远程的 Linux 文件系统及目录步骤1:在Linux系统上安装SSHFS默认情况下,sshfs包不存在所有的主流Linux发行版中,你需要在你的Linux系统中启用epel,在Yum命令行的帮助下安装SSHFS及其依赖。#yuminstallsshfs#dnfinstallsshfs【在Fedora22+发行版上】$sudoapt-getins…

    2022年10月28日
  • mqttnet消息推送与接收[通俗易懂]

    mqttnet消息推送与接收[通俗易懂]创建windows服务网上有很多,不多述;服务端做好后一定要写bat安装卸载文件install.bat@echo.请稍等,MqttNetServiceAddUserAndPassword服务安装启动中…………@echooff@title安装windows服务:MqttNetServiceAddUserAndPassword@sccreateMqttNetServiceAdd…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号