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)


相关推荐

  • Php公众号40029,微信公众号网页授权产生 错误代码:40029 真正解决

    Php公众号40029,微信公众号网页授权产生 错误代码:40029 真正解决在做微信二次开发的时候,调用网站授权接口会遇到{‘errcode’:40029,‘errmsg’:‘invalidcode,hints:[req_id:0407ns44]’}这样的错误。这个问题网上有很多所谓的解决方法,某些也确实能解决,我在开发过程中也遇到相同问题,下面记录一下我的解决方法。网上很多文章说,微信服务器发起了2次“相同”的请求,第一次请求被其终止掉了,我验证了一下,确…

  • python merge函数[通俗易懂]

    python merge函数[通俗易懂]本篇详细说明merge的应用,join和concatenate的拼接方法的与之相似。pd.merge(left,right,how=’inner’,on=None,left_on=None,right_on=None,left_index=False,right_index=False,sort=True,suffixes=(‘_x’,’_y’),copy=True,indicator=False,validate=No

  • 茂名高端碳项目什么时候完建_茂名石化对茂名的影响

    茂名高端碳项目什么时候完建_茂名石化对茂名的影响去年茂南区新引进1000万元以上项目26个,协议投资金额91.15亿元,其中茂南石化园区2020年产值突破百亿大关。近日,茂南区集中开工了5个重大项目,总投资19.8亿元,年度计划投资1.6亿元,涉及石油化工、环保能源、仓储物流、现代农业等多个领域。茂南区第一季度重大工程集中开工的5个项目包括,茂名天源石化有限公司建设的碳三碳四资源利用项目投资总额达18亿元,还有总投资6100万元的茂名市炳昊环境科技有限公司年处理处置5万吨废矿物油等含油废物综合利用绿色环保建设项目,另外总投资6000万元的茂名市德旺农

  • android studio sdk安装失败「建议收藏」

    android studio sdk安装失败「建议收藏」androidstudiosdk安装失败原因电脑只有一个c盘是无法下载sdk的,软件设置不允许在c盘安装sdk

  • Python从入门到进阶之六:Pycharm中如何加入代理

    Python从入门到进阶之六:Pycharm中如何加入代理有时候我们需要引入不同的类库,最简单的方法就是通过加入代理,可以在线引入多种多样的类库加代理的方式也非常简单找到File>settings或者通过快捷键settings(CTRL+ALT+S)输入http搜索然后加入自己需要代理的IP以及端口即可(hostname,port)…

  • 调试HotSpot源代码(配视频)

    调试HotSpot源代码(配视频)

    2020年11月20日

发表回复

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

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