常见问题

TIP

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

本地环境启动不成功

静态资源404问题

问题原因：略

解决方案：

1. 获取publicPath拼接到静态资源前

const { server } = JModule.import('$module.meta');

<img src="`${server}${relativePath}`" />

2. 结合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;
    }
}

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