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

Posted 2023-02-22

【中文标题】Axios 使用 vuejs cli 获取 php 文件不起作用

【英文标题】：Axios get to php file using vuejs cli doesn't work

【发布时间】：2018-11-26 16:52:34

【问题描述】：

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

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

<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;

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

【参考方案1】：

如果您在开发环境中，您可能通过http://localhost:8080 访问您的 vue 应用程序。

你的 axios 应该调用你本地 web 服务器的真实 url：

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

并将 ROOT_API 定义添加到您的 dev 和 prod 配置（/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"',
)