Question

每次我使用vuejs cli上的axios向php文件发出get请求时，它都不运行脚本，而是在没有实际运行脚本的情况下转储完整的php脚本。但是，如果我尝试使用浏览器地址栏中的所需参数访问该地址，则会返回正确的响应。

这是我的代码：Vue组件发出get请求

<script>
import axios from 'axios'
export default{
    data(){
        return{
            id : this.$route.params.id,
            post:{}
        }
    },
    created(){
        axios.get('../../php/ajaxfile.php?postid='+this.id).then((response)=>{
            this.post = response.data;
            console.log(response.data);
        }).catch((error) =>{
            console.log(error);
        });
    }
}

Php脚本：

<?php
include 'config.php';
if(isset($_GET['postid'])){
    $condition  = " id=".$_GET['postid'];
}
$userData = mysqli_query($con,"select * from blogpost WHERE ".$condition );

$response = array();

while($row = mysqli_fetch_assoc($userData)){

    $response[] = $row;
}

echo json_encode($response);
exit;

请帮我弄清楚我做错了什么

Answer 1

在echo之前在PHP中添加它：

header('Content-Type: application/json');

Answer 2

如果您处于开发环境中，则可以通过http://localhost:8080访问您的vue应用。

您的axios应该调用您本地Web服务器的真实网址：

axios.get(process.env.ROOT_API+'/ajaxfile.php?postid='+this.id)

并将ROOT_API定义添加到您的开发和产品配置（/config/dev.env.js和/config/prod.env.js）：

这是我的dev.env.js：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ROOT_API: '"http://my-local-domaine.ltd"',
})

Axios使用vuejs获取到php文件cli不起作用

2 个答案: