使用vue前后端分离,跨域问题求解。求大佬看看我的配置有问题吗,感谢!!

VUE & HTML5 · alibo1016 · 于 5年前 发布 · 19864 次阅读

照着文档给的搭了两天天多了还是这个问题 看着论坛的解答也尝试了也还是不管用 浏览器报错

Access to XMLHttpRequest at 'http://appserver.fecshoptest.com/cms/home/index' from origin 'http://vue.fecshop.test' has been blocked by CORS policy: Request header field fecshop-currency is not allowed by Access-Control-Allow-Headers in preflight response.

这是我的配置:

prod.env.js:

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"//appserver.fecshoptest.com"',
  WEBSITE_ROOT: '"http://vue.fecshop.test"',
  TRACE_ENABLE: '"true"',
  TRACE_WEBSITE_ID: '"9b17f5b4-b96f-46fd-abe6-a579837ccdd9"',
  TRACE_JS_URL: '"trace.fecshop.com/fec_trace.js"',
}

store.js:

export default {
    storeConfig:[
      {
        'domain': 'vue.fecshop.test',
        'lang_code' : 'zh',
        'currency_code' : 'EUR'
      }
    ]
}

Helper.php:

'Origin' => ['http://vue.fecshop.test'],

Store.php:

'appserver.fecshoptest.com'=>

域名都做了本地hosts

查看localStorage里没有fecshop-uuid chrome截图

共收到 20 条回复 fecshop 问题提问
Fecmall#15年前 0 个赞

你设置的没有问题,我怀疑你的代码有点陈旧

1.你的访问地址cms/home/index 对应的controlelr继承这个类

https://github.com/fecshop/yii2_fecshop/blob/master/app/appserver/modules/AppserverController.php#L38

也就是cors是这个类得到的

Yii::$service->helper->appserver->getCors(),

就是这个函数:https://github.com/fecshop/yii2_fecshop/blob/master/services/helper/Appserver.php#L183

更新一下,应该就没有问题了

应该是代码不是最新版本的问题。

alibo1016#25年前 0 个赞

你好,我尝试将1.6.1.0升级到了1.6.2.0 但是问题依旧:worried:

Fecmall#35年前 0 个赞

@alibo1016 #2楼 上面已经和你说了解决这个问题的思路了

你的报错是:Request header field fecshop-currency is not allowed by Access-Control-Allow-Headers in preflight response.

就是cors里面没有将fecshop-currency 写进去,自己排查一下

Fecmall#45年前 0 个赞

浏览器的network-->XHR 里面,自己解决一下吧

alibo1016#55年前 0 个赞

感谢你的回答

跟踪打印了AppserverController.php 、Appserver.php里的cors 是包含fecshop-currency

不过把appserver\web\index.php 这几行注释去掉了 可以访问了 加上注释就不行

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    $cors_allow_headers = ['fecshop-uuid','fecshop-lang','fecshop-currency','access-token'];       
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, ".implode(', ',$cors_allow_headers));
    header('Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS');
    exit;
}

而且去掉注释之后 貌似会重复请求url

Fecmall#65年前 0 个赞

@alibo1016 [#5楼](#comment5)

我给你的建议,不是在这个文件里appserver\web\index.php ,你去仔细看我给你的文件,和入口index.php没有任何关系,先不要动index.php里面的文件。

上面已经说的很清楚了,仔细分析问题

alibo1016#75年前 0 个赞

不好意思

  1. 改入口文件 是我恰好看到了注释 改着试了下
  2. 我不明白那两个文件里有什么问题 里面是有写fecshop-currency的 与git上最新的代码是一模一样
Fecmall#85年前 0 个赞

1.你先吧index.php文件还原

2.参看我上面发的截图,看一下你的请求的reponse header中是否存在 fecshop-currency

你的报错不是:Request header field fecshop-currency is not allowed by Access-Control-Allow-Headers in preflight response. 吗?不懂cors,自行查询

既然你报这个错误,那么就是因为没有这个,那么你想办法让他有这个,问题不就解决了吗?

3.怎么让他有这个?fecshop的代码位置不是给你贴了吗?找到那个文件,自己看看什么原因导致的

1.你的访问地址cms/home/index 对应的controlelr继承这个类

https://github.com/fecshop/yii2_fecshop/blob/master/app/appserver/modules/AppserverController.php#L38

也就是cors是这个类得到的

Yii::$service->helper->appserver->getCors(),
就是这个函数:https://github.com/fecshop/yii2_fecshop/blob/master/services/helper/Appserver.php#L183

这里是代码位置,自己排查

4.该说的都说了,只能帮到这里,出现问题自己debug,没有debug的能力不适合玩fecshop

mixiansheng#95年前 0 个赞

我也遇到了同样的问题

我也遇到同样的问题,只能把appserver\web\index.php 这几行注释去掉了 可以访问了 加上注释就不行

Fecmall#115年前 0 个赞

那几行代码注释掉?

12楼 已删除.
alibo1016#135年前 0 个赞

@mixiansheng [#9楼](#comment9)

public function getCors(){
        $fecshop_uuid = Yii::$service->session->fecshop_uuid;
        $cors_allow_headers = [$fecshop_uuid, 'fecshop-lang', 'fecshop-currency', 'access-token'];
        $cors = $this->appserver_cors;
        $corsFilterArr = [];
        if (is_array($cors) && !empty($cors)) {
            if (isset($cors['Origin']) && $cors['Origin']) {
                $corsFilterArr['Origin'] = $cors['Origin'];
            }
            if (isset($cors['Access-Control-Request-Method']) && $cors['Access-Control-Request-Method']) {
                $corsFilterArr['Access-Control-Request-Method'] = $cors['Access-Control-Request-Method'];
            }
            if (isset($cors['Access-Control-Max-Age']) && $cors['Access-Control-Max-Age']) {
                $corsFilterArr['Access-Control-Max-Age'] = $cors['Access-Control-Max-Age'];
            }
            if (isset($cors['Access-Control-Expose-Headers']) && $cors['Access-Control-Expose-Headers']) {
                $cors_allow_headers = array_merge($cors_allow_headers, $cors['Access-Control-Expose-Headers']);
            }
            $corsFilterArr['Access-Control-Expose-Headers'] = $cors_allow_headers;
			//新增部分
            if(Yii::$app->request->getMethod() === 'OPTIONS'){
                $corsFilterArr['Access-Control-Request-Headers'] = $cors_allow_headers;
            }
        }
        return $corsFilterArr;

    }
Fecmall#155年前 0 个赞

恩,我测试了一下,去掉web/index.php的options部分,存在这个bug,我排除一下

config/dev.env.js这个文件website_root,用localhost:8080 API_ROOT: '"//appserver.fecshop.com"', WEBSITE_ROOT: '"//localhost:8080"' 这里的也用http://localhost:8080 吗 要是把vue的域名本地做域名host映射,譬如域名是fecvue.com,在hosts里"127.0.0.1 fecvue.com"这么写,访问的时候fecvue.com:8080,这么访问吗??在@appserver/config/fecshop_local_services/Helper.php文件, 将'Origin' => ['http://fecvue.com:8080'],这样吗?在@appserver/config/fecshop_local_service/Store.php// store key:域名去掉http部分,作为key,,,,fecvue.com:8080,这样吗???新手请大神解答

17楼 已删除.
Fecmall#185年前 0 个赞

1.6.2.0版本参看解决:http://www.fecshop.com/topic/1656

Fecmall#195年前 0 个赞

@alibo1016 #13楼 按照这个解决试试:http://www.fecshop.com/topic/1656

我测试通过了。

alibo1016#205年前 0 个赞

@Fecshop #19楼 我看了,我先用着自己写的,等官方更新后 再去掉重写,谢谢!

Fecmall#215年前 0 个赞

@alibo1016 #20楼 我的意思是,你按照我的方式测试一下,是否正常了,多一个人测试,多一份安全。

(之前我本地正常是因为@appserver/web/index.php部分的注释去掉了,options请求直接在index.php文件的顶部就会被返回,因此没有报错,注释掉这部分代码我本地也报错,现在修复了)

alibo1016#225年前 1 个赞

@Fecshop #21楼 ok,试了是正常的。

添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册
Your Site Analytics