# 常见问题

TIP

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

# vite 应用接入

# 对于宿主应用:

需要宿主应用支持 html 资源类型, 如何支持可以参考增加对html资源的支持

# 对于子应用:

运行时: 正常使用 JModule.define({modukeKey}, { ... }) 即可, 参考运行时;
开发调试: 参开开发调试

# 本地环境启动不成功

# 静态资源404问题

问题原因：关注一下资源实际加载时的地址, 一般是因为在集成环境中资源域名不对.

解决方案：

获取publicPath拼接到静态资源前

const { origin } = new URL(document.currentScript.src) || {};
imgElement.src = `${origin}${imgElement.src}`;

结合webpack使用

 __webpack_public_path__ = new URL(document.currentScript.src)?.origin

# http 请求域名的问题

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

解决方案：

import axios from 'axios';

const { origin } = new URL(document.currentScript.src) || {};
// 作为子应用接入时，server 的值即子应用域名。其它用法类似，即在 baseURL 中指定子应用域名。
axios.defaults.baseURL = origin;

# 请求跨域问题

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

对于开发环境，如有遇到问题，比如使用了自定义 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;
    }
}

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