用vue3开发一个新项目，在项目也应用了axios这个库。前后端分离的时候会遇到一个跨域的问题。

这里我是直接在后端配置。项目是用TP，这里也给展示一下后端源码。

<?php
declare (strict_types = 1);

namespace app\picture\controller;

class Test 
{
    function __construct(){
        header("Access-Control-Allow-Origin: *");
    }
    public function index(){

        echo json_encode(["status"=>1,"msg"=>"ok"]);

    }

}

在vue3项目中安装axios。

npm install axios

在项目中应用 axios 需要配置一下。创建一个util文件夹然后再创建http.ts文件。看一下目录：

在这个文件中配置全局的url地址跟超时时间，然后再设置一下拦截器。给大家分享一下我项目的中源码；

import axios from "axios";
const http = axios.create({
    // API基础URL
    baseURL: 'http://test.你的域名.top/index.php', 
    // 请求超时时间
    timeout: 5000, 
    // 其他axios配置...
})
// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
})
export default http;

在页面中引用：

这是一个简单post请求，同时传递了参数，请求成功执行第一个then里面的，请求失败执行catch里面的，最后一个then里面的不管请求成功还是失败都会执行。结果查看下面的截图：

<script setup>
  import http from './util/http';
  http.post("/picture/test/index",{"id":"12"}).then(res=>{
    //成功返回数据
    console.log(res)
  }).catch(err=>{
    //发生错误时执行
    console.log(err)
  }).then(()=>{
    console.log("无论咋样都会执行 ")
  })
</script>

请求成功：

请求失败：

------------------ 华丽分割线 ------------------

欢迎大家阅读我的创业笔记，如果你觉得这篇写得不错的话，可以关注我的公众号： 成长创业笔记 ；每周不见不散。

我是一名独立开发者。欢迎大家跟我交流软件开发、软件运营的一切事情，包括网站建设，小程序开发，app开发。

微信号：zstxinghui

更欢迎大家使用我的APP

1、松鼠天气，简洁的天气预报，节日日历工具。

2、陪诊小程序，家政小程序等行业小程序。