# 常见问题

TIP

该文档会持续更新,且基于最新版本遇到的问题。

# 本地环境启动不成功

# 静态资源404问题

问题原因:略

解决方案

  1. 获取publicPath拼接到静态资源前
const { server } = JModule.import('$module.meta');
<img src="`${server}${relativePath}`" />
  1. 结合webpack使用
 __webpack_public_path__ =  JModule.import('$module.meta')?.server

# http 请求域名的问题

以 axios 为例,在源码中的 axios.get('/api/v1/info'),作为子应用在行云环境中运行时,实际请求域名为行云环境的域名。但行云环境并没有提供相应的接口,这将导致接口报错。

解决方案:

/** src/modules/${moduleKey}/bootstrap.js **/

import { server } from '$module.meta';
import axios from 'axios';

// 作为子应用接入时,server 的值即子应用域名。其它用法类似,即在 baseURL 中指定子应用域名。
axios.defaults.baseURL = server;

# 请求跨域问题

该问题影响开发环境及生产环境

对于开发环境,如有遇到问题,比如使用了自定义 header头,默认配置将不能正常工作。

具体配置方式参考 webpack devServer相关配置 (opens new window)

对于生产环境,通常采用如下 nginx 配置
server{
    location /api {
    	if ($http_origin ~* "http:\/\/yourServerName.jd.com$") {
        	add_header "Access-Control-Allow-Credentials" true always;
        	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
		}

        if ($request_method = 'OPTIONS') {
            add_header "Access-Control-Allow-Origin" $http_origin;
            add_header "Access-Control-Allow-Credentials" true;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

            return 204;
        }
        proxy_pass http://somewhere.jd.com;
    }
}

也可以考虑统一网关或其它方式