前台vue跨域跟后台跨域两种方法

最新推荐文章于 2024-07-19 14:29:00 发布

sussu~

最新推荐文章于 2024-07-19 14:29:00 发布

阅读量186

点赞数

文章标签： vue.js java

本文链接：https://blog.csdn.net/dksdxxdww/article/details/127961633

版权

本文介绍了两种跨域解决方案，一种是通过在Vue.js前端配置实现跨域，另一种是在后台SpringBoot框架中设置来允许跨域请求。使用后台跨域时，前端请求URL需包含`http://localhost:端口号`。

摘要由CSDN通过智能技术生成

两个方法用一个就行

前台vue 配置

前台跨域

module.exports = {
  devServer: { // 自定义服务配置
    open:true,
    port:9999,
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        pathRewrite: { '^/api': '' },
        ws: true, // 用于支持websocket
        changeOrigin: true, // 用于控制请求值中的host字段
      },
    },
  },
  lintOnSave: false, // 关闭eslint检查
}

后台跨域后台 Springboot 框架

用了后台跨域前台路径需要加上http:// localhost：端口号

package com.jk.config;

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

@Configuration// 把当前类转换为配置文件类(spring配置文件)
public class CorsConfig implements WebMvcConfigurer {
    //添加跨域映射
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //addMapping 设置那些