vue.config.js跨域问题解决

讲解视频

问题背景

目标地址:
在这里插入图片描述
而当前项目启动是http,协议名不同,所以跨域了

解决步骤和解答

1. 新建vue.config.js文件

2. 添加如下代码:

一般目标路径target写 域名 就可以了

在这里插入图片描述

但其实,写路径也可以,不写路径也可以,没有强制的要求

  • 写路径,就要替换
    在这里插入图片描述

  • 不写路径就不用替换

3. 配置好后,修改访问方式

修改前:
在这里插入图片描述修改后:

在这里插入图片描述

重写域名pathRewrite,指的是把
在这里插入图片描述里面的api替换成空,而不是目标路径尾部的api换成空

  • 修改了,需要替换的情况
    在这里插入图片描述

  • 没修改,不需要替换的情况
    在这里插入图片描述
    明白了这一点,我的项目也可以替换成:
    在这里插入图片描述

记录一下自己的疑惑(跨域问题)

代码介绍

vite.config.js 配置代理服务器

  server: {proxy: {'/tyqw': {//   '/api/v1/services/aigc/text-generation/generation': {// target: 'https://dashscope.aliyuncs.com' // 目标服务器地址// target: 'http://localhost:3000' // 目标服务器地址target: 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation/', // 目标服务器地址changeOrigin: true, // 是否改变源地址rewrite: (path) => path.replace(/^\/tyqw/, '') // 重写路径},'/xfxh': {//   '/api/v1/services/aigc/text-generation/generation': {// target: 'https://dashscope.aliyuncs.com' // 目标服务器地址// target: 'http://localhost:3000' // 目标服务器地址target:'https://spark-api.xf-yun.com/v1.1/chat?authorization=YXBpX2tleT0nMjhlNDIwNzBhOWZjNTIzMjgyMjRjYjQwZGEzYjdiZTYnLCBhbGdvcml0aG09J2htYWMtc2hhMjU2JywgaGVhZGVycz0naG9zdCBkYXRlIHJlcXVlc3QtbGluZScsIHNpZ25hdHVyZT0nMzBuU1ByMjZvZHpRa2YrdVdLdC8rb3BPZ2Jzd1FSWXlzVjRrd3ExQTJERT0n&date=Sun%2C+31+Mar+2024+09%3A29%3A25+GMT&host=127.0.0.1%3A5173', // 目标服务器地址changeOrigin: true, // 是否改变源地址rewrite: (path) => path.replace(/^\/tyqw/, '') // 重写路径}}}

然后修改请求地址

 .post('tyqw', data, config)// .post('/tyqw', data, config)//   '/api/v1/services/aigc/text-generation/generation': {.then((response) => {

问题1:.post(‘tyqw’, data, config)

.post('tyqw', data, config).post('/tyqw', data, config)

这两种写法都可以吗,为什么

在发送网络请求时,.post('tyqw', data, config).post('/tyqw', data, config) 这两种写法的含义是不同的,主要取决于你的应用程序的基本路径和路由设置。

  1. .post('tyqw', data, config): 这种写法是相对路径的写法,表示发送 POST 请求到当前页面的基本路径下的 tyqw 路径。如果你的当前页面的基本路径为 http://example.com/myapp/,那么这个请求实际上是发送到 http://example.com/myapp/tyqw

  2. .post('/tyqw', data, config): 这种写法是绝对路径的写法,表示发送 POST 请求到根路径下的 tyqw 路径。无论当前页面的路径是什么,都会发送请求到 http://example.com/tyqw

这两种写法都可以,取决于你的需求和项目的配置。使用相对路径可以使得你的代码更加灵活,而使用绝对路径可以保证请求的准确性,不会受到页面路径的影响。

需要注意的是,对于前端单页应用(SPA)等情况下,通常会使用绝对路径来发送请求,以确保路由切换时能够正确地发送请求到后端 API。

这也就是为什么我这两种写法都没有报错,因为我的路由是跟路径,所以不管是相对还是绝对路径,都是一样的

问题2: target: ‘https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation/’

target: ‘https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation/’, // 目标服务器地址
改成
target: ‘https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation’, // 目标服务器地址
会有影响吗,这两种写法有什么区别

在目标服务器地址的最后是否包含斜杠 / 会对请求产生影响,这取决于服务器的配置和预期的行为。下面是这两种写法的区别:

  1. 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation/':这种写法表示目标服务器地址以斜杠结尾。当发送请求时,如果请求中的路径没有指定具体的文件或资源,服务器可能会做重定向处理,将请求重定向到一个类似于 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation/index.html' 的具体资源上。

  2. 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation':这种写法表示目标服务器地址没有斜杠结尾。在这种情况下,请求将直接发送到指定的路径,不会触发重定向行为。

如果目标服务器的配置能够处理这两种情况并且行为一致,那么这两种写法不会有太大影响。但如果服务器的配置或行为有所不同,这两种写法可能会导致不同的结果。通常建议根据服务器的实际行为来选择适当的写法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/817126.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

查看 Linux 接入的 USB 设备速率是 USB2 还是 USB3

查看接入 usb 设备的速率 使用以下命令查看接入的 USB 设备速率(每一行最后的 xxM 字样)。插入设备前查看一次,插入设备后查看一次,对比即可定位到刚插入的设备是哪一条。 lsusb -t命令输出如下图 对照 USB 速率表 对照 USB 速…

EasyRecovery数据恢复软件2024试用版下载安装包

EasyRecovery支持的文件格式非常广泛,几乎涵盖了用户日常所需的所有文件类型。具体来说,它支持恢复的办公文档类型包括Microsoft Word、Excel、PPT、MS office、Adobe PDF、Access等。此外,对于音频文件,EasyRecovery同样支持丰富…

初识three.js创建第一个threejs3D页面

说到3D&#xff0c;想必大家都能想到three.js&#xff0c;它是由WebGL封装出来的&#xff0c;接下来&#xff0c;我手把手教大家创建一个简单的3D页面 话尽在代码中&#xff0c;哈哈 大家可以复制代码玩一下 <!DOCTYPE html> <html lang"en"><head&…

【嵌入式 - 输出驱动电路Open Drain (开漏)和Push-Pull (推挽)】

定义 Open drain 和 push-pull 是两种常见的输出驱动电路。它们在数字电子电路中用于控制信号的输出。让我逐一解释它们&#xff1a; 1. Open Drain (开漏): Open drain 输出端通常连接到地 (GND) 或者一个高电阻 (pull-up) 上。当输出信号为逻辑高电平时&#xff0c;输出端…

【位运算】Leetcode 丢失的数字

题目解析 268. 丢失的数字 本题的意思就是数组的长度为n&#xff0c;在[0,n]区间中寻找缺失的一个数字 算法讲解 直观思路&#xff1a;排序 Hash&#xff0c;顺序查找缺失的数字 优化&#xff1a;使用异或&#xff0c;首先将[0,n]之间所有数字异或在一起&#xff0c;然后将…

链表创建的陷阱与细节

链表是线性表的一种&#xff0c;它在逻辑结构上是连续的&#xff0c;在物理结构上是非连续的。 也就是说链表在物理空间上是独立的&#xff0c;可能是东一块西一块的。如下顺序表和链表在内存空间上的对比&#xff1a; 而链表的每一块空间是如何产生联系实现在逻辑结构上是连续…

移动应用安全合规动态:网信办、金管局发文强调数据安全;3月个人信息违规抽查结果出炉!(第五期)

一、监管部门动向&#xff1a;国家互联网信息办公室公布《促进和规范数据跨境流动规定》; 工信部发布《关于网络安全保险典型服务方案目录的公示》 二、安全新闻&#xff1a;恶意软件警报&#xff01;黑客利用软件即服务攻击印度安卓用户&#xff1b;Cerberus银行恶意软件的虚…

第十四届蓝桥杯题解:平方差 ,更小的数,买瓜,网络稳定性(货车运输)

目录 平方差 更小的数 买瓜 网络稳定性&#xff08;货车运输&#xff09; 货车运输 平方差 这道题就是数论的题&#xff0c;不难想到一个数m可以拆成(a-b)(ab)&#xff0c;其实(a-b)和(ab)就是m的一对因子&#xff0c;不妨设为x和y。 则有&#xff1a; abx; a-by; x*ym; 联…

JVM—jps、jstat、jinfo、jmap、jstack的使用

JVM—jps、jstat、jinfo、jmap、jstack的使用 jps jps全称&#xff1a;Java Virtual Machine Process Status Tool 可以查看Java进程&#xff0c;相当于Linux下的ps命令&#xff0c;只不过它只列出Java进程。 jps:列出Jav程序ID和Main函数名称 jps -q:只输出进程ID jps -m …

MATLAB4:数值计算

文章目录 一、实验目的二、实验内容三、仿真结果四、实践中遇到的问题及解决方法 一、实验目的 1. 熟悉根据已知数据进行回归法曲线拟合。   2. 熟悉根据已知数据进行多项式曲线拟合。   3. 熟悉根据已知数据利用指定方法进行数据插值&#xff08;临近插值、线性插值、立方…

小程序视频如何下载到电脑上

小程序视频如何下载到电脑上&#xff0c;很简单 1.利用Fiddler和Charles这些专业的抓包工具 2.利用录屏 3.利用专门抓取资源的工具(集成了抓取下载&#xff0c;而且对资源下载很友好) 工具我已经打包好了 下载高手链接&#xff1a;https://pan.baidu.com/s/1qJ81sNBzzzU0w…

Linux的学习之路:6、Linux编译器-gcc/g++使用

摘要 本文主要是说一些gcc的使用&#xff0c;g和gcc使用一样就没有特殊讲述。 目录 摘要 一、背景知识 二、gcc如何完成 1、预处理(进行宏替换) 2、编译&#xff08;生成汇编&#xff09; 3、汇编&#xff08;生成机器可识别代码 4、链接&#xff08;生成可执行文件或…

【我的代码生成器】生成React页面类

有了数据表的结构信息&#xff0c;就能生成React 的页面类&#xff0c;快捷方便。 生成界面如下&#xff1a; 生成的React FrmUser.js页面如下&#xff1a; 只需再写里面的操作逻辑代码。

银河麒麟之PaddleOCR模型部署

一、PaddleOCR简介 PaddleOCR是一个基于飞桨框架开发的开源OCR工具&#xff0c;提供了一系列强大的文本识别功能。PaddleOCR支持多种文本识别任务&#xff0c;包括文字检测、文字识别、文本方向检测等。它具有高效、准确的特点&#xff0c;适用于多种场景下的文本识别需求&…

IDP之Backstage - 环境搭建

0. 目录 1. 前言2. 环境准备&#xff08;Windows10下&#xff09;2.1 安装nvm2.2 git和docker安装 3. 创建模板项目3.1 典型错误: fails on the yarn install step3.2 再次启动3.3 验证 4. 相关 1. 前言 本不想写这篇&#xff0c;因为看着官网文档写着挺简单的&#xff0c;但实…

线上剧本杀小程序发展趋势如何?

随着几年的快速发展&#xff0c;剧本杀行业进入到了大众的视野&#xff0c;不过从2022年开始&#xff0c;行业就开始处于下滑趋势&#xff0c;但是行业反而变得更加的规范化。 经历过下滑发展后&#xff0c;剧本杀行业已经趋向专业化、精品化发展&#xff0c;行业正在复苏&…

高基报表是什么?高校各部门如何快速填报高基表?

高基报表——全称是《高等教育事业基层统计报表》&#xff08;以下简称《高基报表》&#xff09;&#xff0c;作为高等院校基本情况报表的代表&#xff0c;承载着学校办学实力的真实写照。填报高基报表是一项细致入微的工作&#xff0c;不仅关系到学校的科学管理和决策研究&…

第一节:什么是操作系统

什么是操作系统 一、一台计算机的组成部分1、计算机能干啥2、谈谈计算机硬件 二、什么是操作系统三、学习操作系统的层次 一、一台计算机的组成部分 如下图所示&#xff1a; 这就是就是构成一台计算机的组成部分 1、计算机能干啥 ∙ \bullet ∙计算机是我们专业吃饭的家伙&a…

前端知识学习笔记-六(vue)

简介 Vue是前端优秀框架是一套用于构建用户界面的渐进式框架 Vue优点 Vue是目前前端最火的框架之一 Vue是目前企业技术栈中要求的知识点 vue可以提升开发体验 Vue学习难度较低 Vue开发前准备 一、nodejs环境 Nodejs简介 Nodejs诞生于2009年&#xff0c;主攻服务器方向&#x…

数据结构OJ题——栈和队列

1. 用栈实现队列&#xff08;OJ链接&#xff09; 题目描述&#xff1a;请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09; void push(int x) 将元素 x 推到队列的末尾 int pop() 从队列的开头移除并返回…