关于Xampp设置多个端口，来实现本机jsonp跨域的操作（我踩坑太多了，写出来避免你们入坑）

最新推荐文章于 2022-09-22 12:49:04 发布

加菲猫的鳄鱼

最新推荐文章于 2022-09-22 12:49:04 发布

阅读量702

点赞数

文章标签： jsonp xampp 跨域

本文链接：https://blog.csdn.net/Anticipate_/article/details/89402281

版权

我想在自己笔记本测试，jsonp的跨域请求，跨域我们可以通过xampp设置多个端口来实现跨域（同一域名下的不同端口也是属于跨域）。第一步我们需要找到你安装xamppd的文件路径像我是安装在C盘直接找 C:\xampp\apache\conf>httpd.conf 然后打开文件。

第一步：打开后我们搜索Listen 80 在它的下面添加你需要添加的端口比如我要添加的是8001端口写法如下Listen 8001

第二步：查找AllowOverride none Require all denied

然后我们修改下

#AllowOverride none
#Require all denied
Order deny,allow

Allow from all

第三步：我们要在文件的末尾添加这行代码

NameVirtualHost *:8001
<VirtualHost *:8001>
ServerName localhost:8001
DocumentRoot "C:/xampp/htdocs1"
<Directory "C:/xampp/htdocs1">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>

注意的点是我们需要创建一个htdocs1文件路径位置是xampp下的 C:\xampp>htdocs1，同时我们图中红色箭头的位置文件路径一定要填写正确，之前看很多博客根据指导设置之后都有错误，第一是文件的路径不对，第二是<Directory "C:/xampp/htdocs1">
</Directory>这段内容没有添加，

第四：在我们配置好httpd.conf文件后，我们需要设置电脑的网络设置，打开电脑右下角的网络标志处，点击右键选择（打开网络和共享中心），当然还有其他方式打开，比如从控制面板打开；在我们打开后找到左下角的window防火墙设置，点击进去，找到右侧的高级设置，进入后我们找到出站规则，点击后会打开新版面，此时我们看到右侧有一个新建规则我们点击进去后选择端口，然后点击下一步，添加我们之前配置好的端口，比如我的是8001，就在上面填写，图示如下

，

剩下的自己看着来填写。当这写操作好之后我们就可以打开xampp，如果你是之前有打开xampp的话，你需要先关闭再次打开。然后地址输入http://localhost:8001/就可以

你们看到下面有个test是我在htdocs1里面新增了文件，来实现jsonp

到这我们对xampp的多端口设置就可以了，此时来写html，我们在新设置对的htdocs1（地址显示为8001端口）文件来写我们的html

<body>
    <div>
    跨域请求
    <button id="jsonp1">点击之后请求</button>
    </div>
    <script>
        function jsonpHandle(data){
            console.log(data)
        }
        var jsonId=document.getElementById("jsonp1");
        jsonId.onclick=function(){
            var script=document.createElement("script");
            script.type="text/javascript";
            script.src="http://127.0.0.1:80/jsonp.php?callback=jsonpHandle";
            document.getElementsByTagName("head")[0].appendChild(script);  
        }
    </script>
</body>

这是我jsonp的写法，利用script的src属性来实现跨域请求，同时创建一个函数用来保存，后端传递来的数据。jsonp只有get方式所以我在src上添加了地址和一个回调函数；

php的写法如下我们的php必需是写在另外一个端口的哦，我是写在htdocs（80端口）的里面，

<?php  
 header("Content-Type:application/json;charset=utf-8");
//服务端返回JSON数据  
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
$result=json_encode($arr);   
//动态执行回调函数  
$callback=$_GET['callback'];  
echo $callback."($result)";

此时我们在地址打开8001端口，点击按钮后我们就可以获取到跨域后的数据了

好的，写到这也是差不多了，希望你们看了之后能避坑。

加菲猫的鳄鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于Xampp设置多个端口，来实现本机jsonp跨域的操作（我踩坑太多了，写出来避免你们入坑）

我想在自己笔记本测试，jsonp的跨域请求，跨域我们可以通过xampp设置多个端口来实现跨域（同一域名下的不同端口也是属于跨域）。第一步我们需要找到你安装xamppd的文件路径像我是安装在C盘直接找C:\xampp\apache\conf>httpd.conf 然后打开文件。第一步：打开后我们搜索Listen 80 在它的下面添加你需要添加的端口比如我要添加的是800...
复制链接

扫一扫