thinkphp + vue 跨域问题解决

最新推荐文章于 2024-07-21 07:03:27 发布

原创最新推荐文章于 2024-07-21 07:03:27 发布 · 733 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #php

php 同时被 3 个专栏收录

51 篇文章

订阅专栏

thinkphp

48 篇文章

订阅专栏

7 篇文章

订阅专栏

本文讲述了在Vue项目中遇到的跨域错误，介绍了CORS政策限制和Access-Control-Allow-Origin的重要性。提供了解决方案，包括使用JSONP和在后端设置允许跨域的Header。

在使用VUE开发中，对接接口请求时报错：如下

Access to XMLHttpRequest at 'http://www.aaa.com/secp/getTypeList' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上面的意思就是你访问一个什么地址被CORS 协议阻止，没有在Hearder 里面发现 Access-Control-Allow-Origin 的参数的资源跨域问题的原因：浏览器出于安全考虑，限制访问本站点以外的资源。比如你有一个网站 127.0.0.1:8080/ , 并且上面挂了一个页面，那么在这个页面中，你只访问本站点的资源不会受到限制，但是你如果访问其他站点，比如 127.0.0.1:8081 的资源就会受到限制。

解决办法：

1 比较老的比较通用，也比较麻烦的 jsonp 原理利用 <script src="这里面的地址可以跨域，并且返回的 js 代码会被立即执行" ></script> 这样只要定义一个回调方法f( data ){ 处理数据 }，然后 src 对应的接口需要返回 f( data ); 这样的格式，这样在这个数据返回以后就执行了发f方法，并且带过来数据。jquery 之类的框架有多这个封装，随时随地动态的生产 <script> 标签，然后取得数据。

2 后端允许跨域：只需要在入口文件中添加一行代码即可：

header("Access-Control-Allow-Origin: *");