2025年vue跨域问题的三种解决方案_vue上线之后跨域问题

编程汇总 • 2025-03-18 14:06 • 阅读 9

方案1：使用vue自带配置文件解决跨域问题

（1）这个Vue项目有自带config文件的方式

proxyTable: { 

   

        '/fh': { 

   

            target: 'http://localhost:8080/',//设置你调用的接口域名和端口号 别忘了加http

            changeOrigin: true,    //這裡true表示实现跨域

            pathRewrite: { 

   

                '^/fh': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可

            }

        }

    }

(2）这个Vue项目没有有自带config文件的方式

  devServer: { 

   

         proxy: { 

   

             '/api':{ 

   

                target:'http://localhost:8080/',//设置你调用的接口域名和端口

                 changeOrigin:true,//這裡true表示实现跨域

                 pathRewrite:{ 

   

                   '/api':''

              }

             }

    }

}

发起请求：

解决方案2：在Controller类上架@CrossOrigin

package com.fh.controller;

import com.h.entity.Drug;

import com.h.service.DrugService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.CrossOrigin;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController

@RequestMapping("/drug")

@CrossOrigin

public class DrugController { 



@Autowired

private DrugService drugService;

//查询数据

@RequestMapping("queryDrug")

public ListqueryDrug(){ 



return drugService.queryDrug();

}

//新增

@RequestMapping("addDrug")

public void addDrug(Drug drug){ 



drugService.addDrug(drug);

}

}

解决方案3：如果还不行查看自己的请求url路径，必须加http://协议

2025年vue跨域问题的三种解决方案_vue上线之后跨域问题

相关推荐