目录
一、使用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')
再次访问，发现也能正常显示
