前端处理跨域问题

港控/mmm° 2024-04-06 14:59 144阅读 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 条评论，144人围观）

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

相关阅读

相关前端处理跨域问题

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

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

相关前端跨域问题解决

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

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

相关前端解决跨域问题

什么是跨域？ 1、同源策略是浏览器的安全策略 \-协议名、域名、端口号必须完全一致 2、跨域违背同源策略就会产生跨域 3、解决跨域 jsonp

Dear 丶/ 2023年10月06日 17:54/ 0 赞/ 71 阅读

相关前端跨域

什么是跨域同源策略是一种约定，它是浏览器的最核心也是最安全的功能，如果缺少同源策略，浏览器很容易受到xss，csrf等攻击。所谓的同源的就是“协议+域名+端口”，即使两个

╰+攻爆jí腚メ/ 2023年01月07日 07:21/ 0 赞/ 263 阅读

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

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

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

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

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

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

相关 Lumen处理跨域问题

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

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

相关前端跨域问题

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

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

相关前端跨域

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

今天药忘吃喽~/ 2022年04月22日 01:54/ 0 赞/ 325 阅读

相关前端跨域

前端跨域一、什么是跨域二、网址解析：三、解决跨域 1.src 2.jsonp 3.jq中的jsonp

雨点打透心脏的1/2处/ 2021年09月07日 06:09/ 0 赞/ 490 阅读