门户二开react报跨域
按照教程用o2-cmpt创建的react应用，什么也没修改，配置好了host和port（确定正确），启动项目后报错如下：相同的配置，创建vue3应用就能够正常不会跨域
补充一下，react应用：host是ip的话不会报错，域名会报错跨域；vue3应用：ip和域名都不报错；vue2没试过 参考：https://zhuanlan.zhihu.com/p/163384863 论坛管理员 发表于 2023-10-8 09:59
参考：https://zhuanlan.zhihu.com/p/163384863
我使用的是o2-cmpt创建的react应用，host是域名的话会跨域，而host是IP地址的话不会，你们在node_modules里的@o2oa包里已经配置好proxy代理了呀，只是我没找到原因为什么还会跨域
（ps：同样方法创建的vue3应用不会跨域）
贴一下代码：位置是：o2oa\o2web\source\x_component_financeassistreact\node_modules\@o2oa\react-scripts\config\o2componentProxySetup.js
const o2componentProxySetup = require('http-proxy-middleware');
const axios = require('axios');
const path = require('path');
const fs = require('fs/promises');
const p = path.resolve(process.cwd(), './o2.config.js');
const config = require(p);
const pkg = require(path.resolve(process.cwd(), './package.json'));
const componentPath = pkg.name;
const server = config.server;
const host = `${(server.https) ? 'https' : 'http'}://${server.host}${(!server.httpPort || server.httpPort==='80') ? '' : ':'+server.httpPort}`;
const myproxy = o2componentProxySetup.createProxyMiddleware({
target: host,
changeOrigin: true
});
module.exports = function (app) {
// console.log('host',host)
console.log('componentPath',componentPath)
app.use((req, res, next) => {
if (req.url.startsWith('/x_desktop/res/config/config.json')) {
console.log('1', 1)
console.log('req.url',req.url)
const configUrl = new URL(req.url, host);
console.log('configUrl', configUrl)
console.log('configUrl.toString()',configUrl.toString())
axios.get(configUrl.toString()).then((json)=>{
let o2Config = json.data;
o2Config.sessionStorageEnable = true;
o2Config.applicationServer = {
"host": (config.appServer && config.appServer.host) ? config.appServer.host : server.host
};
o2Config.center = [{
"port": server.port,
"host": server.host
}];
o2Config.proxyApplicationEnable = false;
o2Config.proxyCenterEnable = false;
res.json(o2Config);
console.log('o2Config',o2Config)
next();
}).catch(()=>{next()});
}else if (req.url.indexOf(componentPath+'/lp')!==-1 && req.url.indexOf('min')!==-1) {
console.log('2',2)
let toUrl =path.basename(req._parsedUrl.pathname).replace(/min\./, '')
toUrl = path.resolve(process.cwd()+'\\public', './lp/'+toUrl);
fs.readFile(toUrl).then((data)=>{
res.setHeader('Content-Type', 'application/javascript; charset=UTF-8');
res.send(data);
next();
}, ()=>{
res.send('');
next();
});
} else if (req.url.indexOf('/' + componentPath + '/') !== -1) {
console.log('3',3)
req.url = req.url.replace('/'+componentPath+'/', '/');
next()
} else {
console.log('4',4)
next();
}
});
app.use(
['^/o2_core', '^/o2_lib', '^/x_desktop', '^/x_component_*', '!^/'+componentPath],
myproxy
);
};
如果能把o2-cmpt的webpack换成vite就好了 你试试升级@o2oa/react-scripts 到最新版本 5.0.6 Tommy 发表于 2023-10-9 11:15
你试试升级@o2oa/react-scripts 到最新版本 5.0.6
能出来登录页面了，但是登不上，点登录后还在登录页
https://sm.ms/image/4Bq7D2JMrNayOVp 图片挂图床了，但是没显示出来，这是图片链接：、
!(https://s2.loli.net/2023/10/09/4Bq7D2JMrNayOVp.gif)
创建了一个新应用进行的测试 应该还差个cookie的设置(onProxyReq里)，和忽略组件的设置(vue的是bypass，react不知道是哪个) 正常情况下服务器请求响应头会加上 Access-Control-Allow-* 跨域相关字段，但不知道您的服务器似乎没有输出，可能是通过了其他网络代理或waf之类的网关限制了响应头。
@o2oa/react-scripts 针对这个情况做了一下优化，请更新到5.0.7试试
页:
[1]
2