一、使用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')

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

hualinux 进阶 vue 4.1：axios跨源错误CORS解决相关推荐

Spring 设置跨源资源共享(CORS)
文章目录跨源资源共享策略问题 1. Spring 解决方式:设置 CORS 2. CORS 的前世今生 2.1 CSRF 跨站请求伪造漏洞 2.2 浏览器同源策略的产生同源的定义 2.3 跨源资源 ...
vue中使用axios跨域请求
vue中使用axios请求API或其他域名地址时,会产生跨域请求问题,应该如何解决呢?(本文以请求API为例) 解决方法: 1.为axios设置请求头.拦截器等,这里直接对axios进行封装,将其封装 ...
Tampermonkey总是弹出提示一个用户脚本试图访问跨源资源的解决
问题:Tampermonkey安装了重定向脚本后,搜索时总是弹出"一个用户脚本试图访问跨源资源"的页面提示解决: 1.进入Tampermonkey的选项设置 2.改动下面两个地方 ...
vue里面使用axios跨域问题
前端解决: 打开main.js文件有config文件夹时: 在config/index.js 里面找到proxyTable :{} ,然后在里面加入以下代码 // 配置多个代理proxy: {&qu ...
vue打包部署axios跨域问题
工具版本: [vue -V]:2.9.6 ide工具:VSCode / Idea 前提:我们前端vue工程需要单独部署一.本地使用命令运行跨域问题. 外网访问的地址:https://www.runo ...
Vue关于axios跨域问题的解决
1.在项目根目录config文件夹下找到index.js 2.修改index.js中proxyTable{}内容: proxyTable: {'/api': {target: 'http://192. ...
最全vue打包前后的跨域问题,绝对解决你的问题
[首先查看是否引入数据库文件,如果没有数据库文件,请求后浏览器显示的是跨域问题!先排除数据库文件有没有引入!] 1.打包前的本地localhost:8080环境下可以用 proxyTable代理来解决 ...
axios 跨域问题的解决方法
一.报错信息二.解决方法百度了一早上,网友的博文都是让配置代理[代理可以解决的原因:因为客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的概念(如果服务 ...
跨源资源共享(CORS)漏洞修复
禁止配置 "Access-Control-Allow-Origin" 为 "*" 和 "null": 严格校验 "Orig ...

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.1：axios跨源错误CORS解决相关推荐

最新文章

热门文章