欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于axios进行跨域请求时的问题处理

程序员文章站 2022-07-10 15:41:08
...

跨域问题 报错1(接口文件未处理跨域)

说明:这个错误是 “已被CORS策略阻止:请求的资源上不存在“访问控制允许源”头。”
关于axios进行跨域请求时的问题处理
解决方法:
在接口文件头部加这一句:header('Access-Control-Allow-Origin:*');
php 文件:

<?php
	header("Content-type: text/html; charset=utf-8");
	header('Access-Control-Allow-Origin:*');  // 解决跨域问题

	// POST请求
    // 1、处理接收方式
    error_reporting(0); // 不会弹出警告,只适合当前页
    $body = @file_get_contents('php://input');//接受整个请求主体
    $body = json_decode($body)  ;//反序列化

	// 2、获取参数
    $author = $body->author;
    $title = $body->title;
?>



跨域问题 报错2(请求文件未处理跨域问题)

说明:这个错误是 “已被CORS策略阻止:访问控制在运行前响应中不允许请求头字段内容类型允许头。”
关于axios进行跨域请求时的问题处理
解决方法:
在 axios 参数请求中加这一句:headers: {'Content-Type': 'application/x-www-form-urlencoded'}

javascript 文件:

this.$axios.post('http://127.0.0.1/aladdin-01/src/data/wr_article',{
                    status: 1,
                    author: this.list.author,
                    title: this.list.title,
                    content: this.list.content,
                    labels: JSON.stringify(this.list.labels), 
                    classify: JSON.stringify(this.list.classify)
                },{
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'} //加上这个
                })
                .then(function(res){
                    alert("发表成功!");
                })
                .catch(function(res){
                    console.log(res);
                });

------加完上述两句话,就可以进行 axios 的 POST 跨域操作了…


相关标签: 跨域 axios POST