门户二开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

[JavaScript] 纯文本查看 复制代码

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
    );
};

htt1231

如果能把o2-cmpt的webpack换成vite就好了

Tommy

你试试升级@o2oa/react-scripts 到最新版本 5.0.6

莫拉莱斯

Tommy 发表于 2023-10-9 11:15
你试试升级@o2oa/react-scripts 到最新版本 5.0.6

能出来登录页面了，但是登不上，点登录后还在登录页

莫拉莱斯

图片挂图床了，但是没显示出来，这是图片链接：、

![GIF 2023-10-9 11-24-25.gif]()
创建了一个新应用进行的测试

htt1231

应该还差个cookie的设置(onProxyReq里)，和忽略组件的设置(vue的是bypass，react不知道是哪个)

Tommy

正常情况下服务器请求响应头会加上 Access-Control-Allow-* 跨域相关字段，但不知道您的服务器似乎没有输出，可能是通过了其他网络代理或waf之类的网关限制了响应头。
@o2oa/react-scripts 针对这个情况做了一下优化，请更新到5.0.7试试