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

目录

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

1.1 安装phpStudy一键盘集成工具

1.2 编写php代码

1.3 使用axios访问

1.3.1 axios相关vue代码

1.3.2 报cros错误

二、 cros解决方法

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')

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