Vue的跨域问题

最新推荐文章于 2025-06-01 01:45:00 发布

原创最新推荐文章于 2025-06-01 01:45:00 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #php #前端 #yii2.0

前端专栏收录该内容

3 篇文章

订阅专栏

本文探讨Vue项目中遇到的API接口跨域问题，提供开发环境及线上生产环境的解决方案，包括配置服务器代理与使用CORS解决跨域的方法，并附带PHP示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有不少刚学Vue的童鞋们可能会遇到请求Api接口时出现跨域的问题(也会有运气好没有遇到的)，这篇文章仅供参考，这是在询问了前端的朋友后写的。

解决前端跨域的问题有两种情况，一个是开发环境，另外一个是线上生产环境。

目前开发环境的跨域问题还没有解决，有知道的童鞋麻烦告知一声。只知道要配置服务器代理，但是按照网上的教程配置完后还是没有效果，求大神告知。

另外一种情况是线上生产环境使用cors解决跨域的问题。

这种方法开发环境和线上生产环境都适用，这里一PHP来进行说明:

在非框架中

//json头
header("Content-type: application/json");
//跨域
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: 跨域URL");
//CORS
header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");
header('Access-Control-Allow-Headers:x-r

在框架中，以yii2.0框架来举例说明:

在控制器中添加如下代码，具体配置根据自己的需求进行配置
public function behaviors()
    {
        return ArrayHelper::merge([
            [
                'class' => Cors::className(),
                'cors' => [
                    'Origin' => ['*'],
                    'Access-Control-Request-Method' => [],
                    'Access-Control-Request-Headers'=>['*']
                ],

            ],
        ], parent::behaviors());
    }

有什么不到之处，请各位大神即时指出