前端处理跨域问题

港控/mmm° 2024-04-06 14:59 52阅读 0赞

#### 处理跨域问题 ####

由于发起ajax请求的域为http://localhost:5173, 而后台服务器的域为http://localhost:8080, 
    所以浏览器会限制该请求的发送, 这种问题称为跨域问题, 跨域问题可以在服务器端解决,
    也可以在浏览器端解决, 咱们这一块通过配置代理的方式解决

**request.js中配置统一前缀 /api**

//定制请求的实例
    
    //导入axios  npm install axios
    import axios from 'axios';
    //定义一个变量,记录公共的前缀  ,  baseURL
    // const baseURL = 'http://localhost:8080';
    const baseURL='/api';
    const instance = axios.create({
        baseURL})
    
    
    //添加响应拦截器
    instance.interceptors.response.use(
        result=>{
        
            return result.data;
        },
        err=>{
        
            alert('服务异常');
            return Promise.reject(err);//异步的状态转化成失败的状态
        }
    )
    
    export default instance;

**vie.config.js中配置代理**

import {
         fileURLToPath, URL } from 'node:url'
    
    import {
         defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    // https://vitejs.dev/config/
    export default defineConfig({
        
      plugins: [
        vue(),
      ],
      resolve: {
        
        alias: {
        
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      },
      server:{
        
        proxy:{
        
          '/api':{
        
            target:'http://localhost:8080',
            changeOrigin: true, // 是否改变请求域名
            rewrite: (path) => path.replace(/^\/api/, '')//将原有请求路径中的api替换为''
          }
        }
      }
    })

发表评论取消回复

表情：

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

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

相关阅读

相关前端处理跨域问题

处理跨域问题由于发起ajax请求的域为http://localhost:5173, 而后台服务器的域为http://localhost:8080, 所

港控/mmm°/ 2024年04月06日 14:59/ 0 赞/ 53 阅读

相关前端跨域问题解决

一、同源策略同源策略是一个重要的安全策略，它用于限制一个Origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 O

妖狐艹你老母/ 2024年02月21日 04:07/ 0 赞/ 20 阅读

相关 SpringBoot处理跨域问题

其实标题叫SpringBoot处理跨域是个伪标题哈。其实跨域的存在是浏览器问题。当你去访问其他人的资源时候，很可能会出现跨域问题。下面是网上搜集来的关于什么情况下回出现

红太狼/ 2024年02月18日 21:46/ 0 赞/ 2 阅读

相关 springboot跨域问题处理

版本springboot1.X import org.springframework.context.annotation.Configuration; im

雨点打透心脏的1/2处/ 2023年01月05日 04:00/ 0 赞/ 129 阅读

相关跨域的几种解决方案,java处理跨域,前端处理跨域

跨域目前是广大开发者经常遇到的一个问题.在此我将几种常用的解决方案介绍一下 1:JSONP JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，缺点是

冷不防/ 2022年12月07日 15:10/ 0 赞/ 204 阅读

相关什么是前端跨域，怎么解决跨域问题

什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指：域名，协议，端口均相同，不明白没关系，举个栗子

川长思鸟来/ 2022年10月26日 12:45/ 0 赞/ 206 阅读

相关 Lumen处理跨域问题

1. 导包 composer require barryvdh/laravel-cors 1 2.注册包在 “bootstrap” 文件夹下的 “app.ph

怼烎@/ 2022年10月17日 10:49/ 0 赞/ 169 阅读

相关前端跨域问题

跨域 1、域名地址组成域名组成图如下:域名组成.png ![这里写图片描述][SouthEast] 当协议、主域名、端口号中任意一个不相同

不念不忘少年蓝@/ 2022年07月12日 12:36/ 0 赞/ 217 阅读

相关 PHP解决前端跨域问题

前不久使用vue做了一个单页的应用，一切配置都按照要求配置完毕之后，使用vue的axios请求的时候报出了不支持跨域的操作，指出服务端拒绝了请求，后来查阅相关资料，需要对P

梦里梦外;/ 2022年06月04日 06:50/ 0 赞/ 321 阅读

相关 Webpack处理跨域问题

项目预计所有功能都实现啦，[GitHub地址][GitHub]如果有什么功能问题，提出来哈。 > 建议先注册，如果觉得注册麻烦就直接登录哈，登录名：微笑（hhh,我也不知道为

今天药忘吃喽~/ 2022年05月21日 04:29/ 0 赞/ 190 阅读