Web App A通过Ajax带Bearer Token显示OAuth2认证的Web App B首页问题求助

Hey there, let's break down why you're hitting that "SecurityError: The operation is insecure" and fix it up!

问题根源 #

This error boils down to the browser's same-origin policy —— history.pushState() can only modify URLs that share the same origin as your current page. Your Web App A runs on http://172.20.30.15:8180, but you're trying to set the URL to http://172.20.40.15:8080 (Web App B's domain). This is a cross-origin operation, and browsers block it to prevent phishing attacks (like tricking users into thinking they're on a trusted site when they're not).

Also, a couple small tweaks to your code would make it more robust:

• Fetching a home page usually makes more sense with a GET request instead of POST
• window.write(data) will overwrite your entire Web App A page (including scripts and styles) — inserting content into a dedicated container is safer

解决方案 #

Based on your goal of showing Web App B's home page in Web App A, here are two workable options:

方案1：Keep content within Web App A's domain

If you don't need the address bar to show Web App B's domain, just update pushState to a same-origin path:

// Assume your Web App A has a container like <div id="app-b-content"></div>
$.ajax({
    url: 'http://172.20.40.15:8080/B',
    headers: {
        'Authorization': `Bearer ${token}`,
    },
    method: 'GET', // Switch to GET for home page retrieval
    success: function(data){
        // Update URL to a relative path under Web App A
        history.pushState({}, '', '/web-app-b-home');
        // Insert B's content into the dedicated container instead of overwriting the page
        $('#app-b-content').html(data);
    },
    error: function(xhr, status, err){
        console.error('Failed to load Web App B home page:', err);
    }
});

方案2：Redirect to Web App B's domain

If you absolutely need the address bar to show Web App B's domain, pushState won't work — you'll need to redirect the page directly. Note that the Bearer Token from your Ajax request can't be carried over to a page redirect, so you'll need to use OAuth2's standard flow:

1. Redirect from Web App A to Web App B's OAuth2 authorization page
2. After the user authenticates, Web App B will send an authorization code back to Web App A
3. Use the code to fetch a valid Token, then redirect to Web App B's home page (the browser will maintain the authentication session)

This approach aligns with OAuth2 security best practices and avoids token leakage risks.

Key Reminder #

Never try to bypass the browser's same-origin policy — it's a core security mechanism protecting users. All cross-origin operations should follow standard protocols like CORS or OAuth2.

内容的提问来源于stack exchange，提问作者arsalan fallah