VUE axios POST 发送跨域 cros 问题

柔光的暖阳◎ 2023-10-07 20:27 17阅读 0赞

#### 阅读目录 ####

*  服务器 PHP 端代码
 *  Vue 端 axios 请求

## 服务器 PHP 端代码 ##

在请求的方法里添加如下代码：

header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers:content-type");
    header('Access-Control-Allow-Methods: POST,GET');

## Vue 端 axios 请求 ##

this.$axios.post('http://XXXX.com',{
        name:'test'})
    .then(function (response) {
        
        console.log(response);
    })
    .catch(function (error) {
        
        console.log(error);
    });

这样写，在请求的时候就会遇到：

![在这里插入图片描述][7150890e73dc4460a403590737b6fc8d.png]  
axios 在发送数据时需要字符串的方式进行发送，也就是说是放在 `form-data` 当中的。  
在实际项目中，为了方便，我引入了 `qs` 来帮助处理这块数据：

解决后的代码应该是：

import qs from 'qs';
    
    this.$axios.post('域名/api/路由', qs.stringify(this.dynamicValidateForm))
    .then(function (response) {
        
        console.log(response);
    })
    .catch(function (error) {
        
        console.log(error);
    });

`this.dynamicValidateForm` 为一个对象。

OK,问题解决。

1.npm地址
    
    https://www.npmjs.com/package/qs
    
    2、概述
    
    将url中的参数转为对象；
    
    将对象转为url参数形式

[7150890e73dc4460a403590737b6fc8d.png]: https://img-blog.csdnimg.cn/7150890e73dc4460a403590737b6fc8d.png

发表评论取消回复

表情：

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

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

相关阅读

相关解决Vue中Axios发送请求时跨域的问题。

0 写在前面在程序开发时，前后端运行在不同的地方。假设自己的电脑启动前后端，那么他们的端口号不可以冲突。当在Vue发起请求，那么就存在跨域的问题，会被浏览器COR

淩亂°似流年/ 2024年03月27日 16:44/ 0 赞/ 100 阅读

相关 VUE axios POST 发送跨域 cros 问题

阅读目录服务器 PHP 端代码 Vue 端 axios 请求服务器 PHP 端代码在请求的方法里添加如下代码： header('Acc

柔光的暖阳◎/ 2023年10月07日 20:27/ 0 赞/ 18 阅读

相关 axios实现cros跨域 fetch实现jsonp跨域

axios实现cros跨域 > 1. 网站 [www.npmjs.com][],能搜索到插件安装及使用方式 > 2. axios最终返回的是promise对象 > 3

怼烎@/ 2023年06月18日 10:54/ 0 赞/ 32 阅读

相关解决Axios跨域问题（Axios跨域问题解决方案）

问题背景 Axios是不允许跨域访问的，别说跨域，跨端口都不行。例如某项目我本地vue前端frontEnd为`localhost:8889`，Java后台 backEnd

以你之姓@/ 2023年02月25日 08:38/ 0 赞/ 40 阅读

相关 vue前端解决跨域问题（axios）

vue前端解决跨域问题（axios） 1、安装环境 2、配置代理 1.在config文件夹下的index.js文件中的proxyTable字段中，

朴灿烈づ我的快乐病毒、/ 2023年02月18日 01:57/ 0 赞/ 141 阅读

相关 Spring Boot : CROS解决跨域问题

package com.yanshu.util; import org.springframework.context.annotation.Configura

傷城~/ 2022年06月01日 23:27/ 0 赞/ 297 阅读

相关 SpringBoot使用CROS解决跨域问题

> 跨域问题其实之前就有说过，不明白的可以参考我之前的文章，这章主要讲解SpringBoot CROS的支持。这里主要按照官方文档方式讲述。 SpringBoot

布满荆棘的人生/ 2022年05月20日 01:04/ 0 赞/ 260 阅读

相关【VUE axios】axios跨域方式

1、配置config下的index.js proxyTable: { '/apis': { target: '

爱被打了一巴掌/ 2022年05月19日 06:55/ 0 赞/ 342 阅读

相关解决axios跨域时，发送post请求变options的问题

mounted() { let config = { headers : { 'Content-Type':'appli

深藏阁楼爱情的钟/ 2022年02月27日 08:20/ 0 赞/ 314 阅读

相关 vue axios + Java 跨域

1.在 vue main.js 的里面 import axios from 'axios'//引入axios,来发送请求 Vue.prototype.axios

女爷i/ 2022年01月22日 00:45/ 0 赞/ 334 阅读