# 常见问题
TIP
该文档会持续更新,且基于最新版本遇到的问题。
# 本地环境启动不成功
# 静态资源404问题
问题原因:略
解决方案:
- 获取publicPath拼接到静态资源前
const { server } = JModule.import('$module.meta');
<img src="`${server}${relativePath}`" />
- 结合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;
}
}
也可以考虑统一网关或其它方式