Axios跨域请求处理

问题背景:

vue 项目用 axios 进行请求的时候,总是报"Access to XMLHttpRequest at 'http://localhost:8889/api/login' from origin 'http://localhost:8080......'"的错误


实际上就是前后端分离的情况下,发生了跨域的问题

跨域定义:

解决方案:vue-cli转发+SpringBoot后端配置

本次问题用到了vue-cli的请求代理devServer.proxy,强烈建议查看官网vue-cli请求代理

本次问题产生背景:

springboot版本:2.5.0,提一下这个主要是因为SpringBoot升级2.4.0之后,跨域配置中的.allowedOrigins不再可用,所以跨域配置需要更改

前端配置(Vue+Axios)

在这个文件中添加配置,现在是默认配置

javascript 复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

加入配置代理

本次问题背景:

前后端分离,前端场景:localhost:8080

后端场景:localhost:8889

前端发出请求,虽然域名相同,但是端口号不同,就会被判定为跨域

所以加入了代理,把8080发出的请求代理到8889的端口(域名也是一个道理),让server认为是同一个域名,同一个port发出的请求,避免了跨域

javascript 复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8889/', //填写请求的目标地址(将请求转发到的目标主机,这样请求就会被认为是同源)
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    }
  }
})

解读一下:

其他配置:

至此前端配置完毕,看一下请求的方法

后端配置(SpringBoot)

跨域配置

java 复制代码
package com.cc.blog.admin.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
                .allowCredentials(true).maxAge(3600);
    }
    
}

测试

响应成功

相关推荐
十里-20 分钟前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
D_C_tyu1 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
千里码aicood1 小时前
python+vue旅游购票管理系统设计(源码+文档+调试+基础修改+答疑)
vue.js·python·旅游
RoboWizard2 小时前
怎么判断我的电脑是否支持PCIe 5.0 SSD?Kingston FURY Renegade G5
java·spring·智能手机·电脑·金士顿
麦麦大数据3 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析
qq_339191143 小时前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
明仔的阳光午后5 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
橙某人6 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
超龄超能程序猿7 小时前
SpringAIalibaba +milvus本地化全链路知识库系统
java·人工智能·spring·milvus
rengang667 小时前
103-Spring AI Alibaba Milvus RAG 示例
人工智能·spring·milvus·rag·spring ai·ai应用编程