hualinux 进阶 vue 4.1：axios跨源错误CORS解决

最新推荐文章于 2025-10-06 10:40:19 发布

原创最新推荐文章于 2025-10-06 10:40:19 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#hualinux vue #vue axios #axios跨源错误CORS解决 #axios跨源错误解决 #axios CORS解决

进阶篇3 vue.js专业前端入门专栏收录该内容

32 篇文章

订阅专栏

本文档详细介绍了在使用Vue的axios访问PHP返回的JSON数据时遇到的CORS跨域问题及其解决方案。首先，展示了如何通过phpStudy搭建PHP环境并编写返回JSON的PHP代码。然后，演示了在Vue中使用axios访问该PHP接口时遇到的CORS错误。接着，提供了三种解决CORS问题的方法：在PHP文件中设置允许跨域，修改nginx配置允许跨域，以及在Vue项目中通过vue.config.js配置代理。最后，通过在Vue中配置代理成功解决了跨域问题。

一、使用php编写返回json格式的数据

1.1 安装phpStudy一键盘集成工具

2.1 解决方法一，充许同源（网站代码上修改）

2.2 解决方法二，nginx中充许同源

2.3 解决方法三，在vue中添加（推荐）

2.3.1.创建webpack配置文件vue.config.js

2.3.2 修改vue文件

上一篇《hualinux 进阶 vue 4.0：使用axios与后端交互》的例子是按vue官网Cookbook中的《使用 axios 访问 API》例子，编写访问是正常的。

实际工作中，这样编写会出现cros跨源问题，为了能出现这个问题，我使用的是PHP原代编写简单的代码。

一、使用php编写返回json格式的数据

1.1 安装phpStudy一键盘集成工具

为了方便我使用php原代编写返回json的php页面，当然如果熟悉springBoot编写API也是可以，django也行。

我从网上下载一个一键集成工具phpStudy，我使用的是nginx，运行nginx就会自动运行php了。我在软件管理中把原来的nginx卸载，安装了一个1.16.1

启动这个php就启动了

打开网站目录

1.2 编写php代码

我在根目录下创建一个名为api的php文件，代码如下：

<?php
/**
 * 默认禁止跨域，即协议、域名或IP、端口号要一样。下面配置是请允许跨域
 * header("Access-Control-Allow-Origin: http://192.168.3.10:8080");
 * http://192.168.3.10:8080 为vue的IP地址
 *  */ 

$sid=$_GET["sid"];


$picPath='http://192.168.3.200/hua';

$myArr = [
  [
    "picid" => 1, 
    "picurl" => "$picPath/pic/lz1.jpg",
    "name" => "励志",
    "describe" => "这是励志的句子，一起努力！",
  ],
  [
    "picid" => 2, 
    "picurl" => "$picPath/pic/lz2.jpg",
    "name" => "励志2",
    "describe" => "这是励志的句子，一起努力！",
  ],
  [
    "picid" => 3, 
    "picurl" => "$picPath/pic/1.jpg",
    "name" => "风景",
   "describe" => "这是风景1图片！",
  ],
  [
    "picid" => 4, 
    "picurl" => "$picPath/pic/2.jpg",
    "name" => "风景2",
    "describe" => "这是风景2！",
  ],

  [
    "picid" => 5, 
    "picurl" => "$picPath/pic/hua1.jpg",
    "name" => "花1",
   "describe" => "美丽的花朵1！",],

  [
    "picid" => 6, 
    "picurl" => "$picPath/pic/hua2.jpg",
    "name" => "花2",
   "describe" => "美丽的花朵2！",
  ],
];

$myJSON = json_encode($myArr,JSON_UNESCAPED_UNICODE);

echo $myJSON;

在vue机子使用浏览器访问看一睛效果，我的是另一个win7电脑，为http://192.168.3.200/api.php

1.3 使用axios访问

1.3.1 axios相关vue代码

直接访问能正常，现在改用vue的axios通过IP地址访问试下，我们把上一章《hualinux 进阶 vue 4.0：使用axios与后端交互》的例子链接修改一下，变成自己的php地址，About.vue代码如下：

<template>
  <div class="about">
    <div id="app">
      {{ info }}
    </div>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name:'About',
  data(){
    return{
      info: null,
    }
  },
  mounted () {
    axios
        .get('http://192.168.3.200/api.php')
        .then(response => (this.info = response))
  }
}
</script>

1.3.2 报cros错误

打开火狐浏览器，按F12，并点about链接看一下效果，发现报错了，如下图所示：

二、 cros解决方法

直接用浏览器访问是正常的，用axios就报错，点一下详细了解，提出了解决方案

2.1 解决方法一，充许同源（网站代码上修改）

我使用的是PHP，直接在PHP源文件中添加，充许所有同源，一般生产环境中还是指定IP或域名比较好，

比如我用的是vue请求，vue的地址为：192.168.3.10:8080，那么配置为：

header("Access-Control-Allow-Origin: http://192.168.3.10:8080");

发现能正常访问，但这个太麻烦了，如果PHP页面很多，每个PHP都要添加

2.2 解决方法二，nginx中充许同源

因为我的web是nginx，可以在nginx配置文件中的server块中的php块下添加请求头来解决跨域，黑色粗体部分就是

           location ~ \.php(.*)$ {

       add_header 'Access-Control-Allow-Origin' '*';

       add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE';

       add_header 'Access-Control-Allow-Header' 'Content-Type,*';

            fastcgi_pass   127.0.0.1:9001;

            fastcgi_index index.php;

            fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;

            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

            fastcgi_param PATH_INFO $fastcgi_path_info;

            fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;

            include        fastcgi_params;

        }

2.3 解决方法三，在vue中添加（推荐）

2.3.1.创建webpack配置文件vue.config.js

package.json同级别路径中创建vue.config.js作为webpack的配置文件，即在项目的根目录下创建vue.config.js配置文件，添加如下内容

module.exports = {
    devServer: {
        proxy: 'http://192.168.3.200/index.php'
    }
}

2.3.2 修改vue文件

这里需要注意设置过proxy之后再使用axios发送请求的url就不能写完整的地址了,直接写/和后面的名称就行,走代理之后会拼接成完整的原始地址

把原来的

        .get('http://192.168.3.200/api.php')

改为：

        .get('/api.php')

再次访问，发现也能正常显示