Vue3.x axios跨域请求的问题

阳光穿透心脏的1/2处 2024-04-18 13:54 79阅读 0赞

### 描述 ###

一般请求的url地址与项目所在地址不一致便会触发跨域请求，若没有跨域措施，一般会抛出No 'Access-Control-Allow-Origin'  错误

### 解决方案 ###

解决方案就是更改配置文件 vue.config.js，在 devServer 下配置 proxy

devServer: {
        proxy: {
          '/api': {
            target: 'https://xxx/',  //要跨域请求的地址url
            changeOrigin: true,
            pathRewrite: {
              '^/api': '' //重写的路径
            }
          }
      }

之后再axios请求时直接写

axios.get('/api' + '/product/list')

这样的形式就可以了

大体理解就是 axios 请求时，遇到 /api 就替换为 https://xxx/ ，请求路径就是 pathRewrite，这里是空。所以调用/api，就相当于调用

https://xxx/

若改成

devServer: {
        proxy: {
          '/api': {
            target: 'https://xxx',  //要跨域请求的地址url
            changeOrigin: true,
            pathRewrite: {
              '^/api': '/' //重写的路径
            }
          }
      }

最终结果一样

### 其他问题 ###

![20190907201536242.png][]

'/createapi': {
            target: 'http://localhost:8080/sell/buyer/',
            changeOrigin: true,
            pathRewrite: {
              '^/createapi': ''
            }
    }

有时候明明设置了代理，请求还是如此，但实际上，已经正确请求了，只是这样显示，不知道为何

[20190907201536242.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e510cd655bef4c338b53983e4bc5a33a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，79人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3.x axios跨域请求的问题

描述一般请求的url地址与项目所在地址不一致便会触发跨域请求，若没有跨域措施，一般会抛出No 'Access-Control-Allow-Origin' 错误 ...

阳光穿透心脏的1/2处/ 2024年04月18日 13:54/ 0 赞/ 80 阅读

相关解决Vue中Axios发送请求时跨域的问题。

0 写在前面在程序开发时，前后端运行在不同的地方。假设自己的电脑启动前后端，那么他们的端口号不可以冲突。当在Vue发起请求，那么就存在跨域的问题，会被浏览器COR

淩亂°似流年/ 2024年03月27日 16:44/ 0 赞/ 98 阅读

相关 vue前端解决跨域问题（axios）

vue前端解决跨域问题（axios） 1、安装环境 2、配置代理 1.在config文件夹下的index.js文件中的proxyTable字段中，

朴灿烈づ我的快乐病毒、/ 2023年02月18日 01:57/ 0 赞/ 140 阅读

相关 axios请求，跨域问题，设置跨域代理

生成一个vue项目之后，开始写请求，请求数据，渲染到前端界面，有时候直接请求服务器上的接口，会遇到跨域问题，遇到跨域的时候，需要设置跨域代理~ 1：进入新建的项目之中，使用n

今天药忘吃喽~/ 2022年12月22日 00:57/ 0 赞/ 317 阅读

相关 React Axios 请求解决跨域问题

网上看了很多的方案，但是不知道为什么，作为初学者，对react不太清楚的话，解决跨域还是有很多的问题。这篇博客针对小白，第一次调试react 跨域问题，甚至第一次使用Axios

秒速五厘米/ 2022年09月10日 02:29/ 0 赞/ 342 阅读

相关 VUe3 @cli(axios)跨域访问

CompC的代码： <template> <div> <button @click="sendAjax">发送ajax请求</button>

╰半夏微凉°/ 2022年09月07日 09:38/ 0 赞/ 199 阅读

相关【VUE axios】axios跨域方式

1、配置config下的index.js proxyTable: { '/apis': { target: '

爱被打了一巴掌/ 2022年05月19日 06:55/ 0 赞/ 341 阅读

相关 Vue使用Axios实现http请求以及解决跨域问题

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios的中文文档以及github地址如下：中文：[https://www

墨蓝/ 2022年05月15日 00:43/ 0 赞/ 500 阅读

相关 vue-cli 3.0 axios 跨域请求

请先阅读[vue官方文档][vue] 创建个 vue.config.js 文件。请勿使用babel.config.js module.exports = {

深藏阁楼爱情的钟/ 2022年02月05日 10:19/ 0 赞/ 265 阅读

相关 Vue-cli3之axios跨域问题解决方案（客户端跨域）

最权威的配置参考官方文档：[https://cli.vuejs.org/zh/config/][https_cli.vuejs.org_zh_config] vue.

浅浅的花香味﹌/ 2021年09月17日 18:38/ 0 赞/ 386 阅读