VUE3请求意外报跨越错误或者500错误问题

1.有可能是请求传参和传参类型写错了

首先要确保该请求接口是支持跨域的(不支持叫后端改)

access-control-allow-headers:Content-Type, Accept, Access-Control-Allow-Origin, api_key, Authorization
access-control-allow-methods:GET, POST, OPTIONS
access-control-allow-origin:*

在这里插入图片描述

application/x-www-form-urlencoded 是一种 HTTP 请求体的 MIME 类型,它定义了如何将表单数据编码成键值对的形式。这种编码方式通常用于发送表单数据到服务器,在这种编码下,键值对通过 = 连接,不同的键值对之间通过 & 分隔。

JS原生写法

// 发送请求
fetch("http://Files.xxxx.com/Home/PackedFile", {
 method: "POST",
 headers: {
   "Content-Type": "application/x-www-form-urlencoded",//传参类型
 },
 body: "FilePath=/SiteFiles/image/20240813/202408131135564792ss.png,/SiteFiles/image/20240813/202408131041042778ss.png",//请求传参
    })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((error) => console.error("Error:", error));
  }

或者使用axios

import axios from "axios";//引用axios
  
const rawData = "FilePath=" + arrayOrComma(arr);//请求参数
    axios
      .post("https://Files.xxxx.com/Home/PackedFile", rawData, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",//传参类型
        },
      })
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.error("Error sending data:", error);
      });
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2.0对接口CORS错误问题需要在前端和后端分别进行处理。 在前端,CORS错误是由于浏览器的同源策略导致的。具体来说,当前端代码访问不同域的接口时,浏览器会发送一个预检请求(OPTIONS请求),后端接口需要正确地处理这个预检请求。在Vue项目中,可以通过配置webpack或者使用代理来解决CORS问题。例如,可以在`config/index.js`中的`proxyTable`中添加如下配置: ``` proxyTable: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' }, } } ``` 这样,前端请求接口`/api/users`时,就会被代理到`http://api.example.com/users`,避免了CORS错误。 在后端,需要正确设置响应的CORS头信息。可以在响应头中添加`Access-Control-Allow-Origin`字段,并设置为允许访问的域名,例如`Access-Control-Allow-Origin: http://example.com`,表示只允许来自`http://example.com`的请求访问接口。还可以设置其他CORS相关的头信息,例如`Access-Control-Allow-Headers`和`Access-Control-Allow-Methods`。根据后端的语言和框架不同,具体的设置方法会有所不同。 综上所述,解决Vue 2.0对接口CORS错误问题需要在前端和后端分别进行处理。前端可以通过配置webpack的代理或者使用代理服务器来避免CORS错误,后端需要正确设置响应的CORS头信息。这样就能实现跨域访问接口并避免CORS错误的发生。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值