What is Cross-Origin

Cross-origin is a browser-specific concept that refers to JavaScript code accessing sites other than its own origin. For example, if JavaScript code on site A’s webpage requests data from site B, that is cross-origin.

For A and B to be considered the same origin, they must have the same protocol (e.g., http and https cannot work together), the same domain name, and the same port number.

If you are building apps, mini-programs, or other non-H5 platforms, you will not encounter cross-origin issues.

A slight exception is iOS’s WKWebView. In 5+App, or uni-app’s web-view component and renderjs, cross-origin issues can arise due to WKWebView restrictions. For more details, see the special article: https://ask.dcloud.net.cn/article/36348.

In uni-app, regular JavaScript code in the App does not run under Webview, so there is no cross-origin issue.

Since uni-app uses a standard front-end and back-end separation pattern, when developing H5 applications, if the front-end code and back-end API are not deployed on the same domain server, the browser will report a cross-origin error.

# If the Front-end Needs to Call Functions to Connect to UniCloud Cloud Functions

In H5 pages, calling functions will be cross-origin. At this time, you need to configure the domain name whitelist in the UniCloud web console. Whitelisted domains can make cross-origin function calls. For details, see: https://doc.dcloud.net.cn/uniCloud/quickstart?id=useinh5

Additionally, there is no cross-origin issue when running in HBuilderX’s built-in browser.

# If the Front-end Needs to Connect to Traditional Back-end Servers

There are solutions for cross-origin in both deployment and debugging scenarios, as detailed below:

# Cross-Origin Solutions for Deployment

Solution 1: The best approach is to deploy the front-end code and back-end API on the same domain web server.

Solution 2: Configure the back-end server to allow cross-origin access. For example, if the front-end page is deployed in UniCloud’s front-end hosting but needs to access your own server’s API, you need to configure the server to allow cross-origin access from the front-end hosting domain. Different server frameworks have different cross-origin configurations. Using eggjs as an example:

(1) Install the egg-cors package:

“`

npm i egg-cors –save

“`

(2) Enable cors in plugin.js:

“`

exports.cors = {

enable: true,

package: ‘egg-cors’,

};

“`

(3) Configure in config.default.js:

“`

config.security = {

domainWhiteList: [‘front-end hosting domain’],

};

“`

# Cross-Origin Solutions for Debugging

When front-end engineers are debugging, the running front-end code is on uni-app’s built-in web server, not deployed on the back-end business server, so cross-origin issues will arise.

Besides coordinating with the back-end to configure allowed cross-origin, you can actually solve the cross-origin problem yourself. There are 3 solutions to choose from:

# Solution 1: Use HBuilderX’s Built-in Browser

This built-in browser has been processed by the official team and does not have cross-origin issues. It is simple and easy to use, and recommended. (Requires HBuilderX 2.6 or above)

After opening the page, click the preview button in the top right of HBuilderX to open the internal browser. Or you can select “Run to Built-in Browser” from the Run menu.

# Solution 2: Configure webpack-dev-server Proxy

Here is a configuration guide more detailed than the uni official documentation: https://juejin.im/post/5e43b2645188254902765766

# Solution 3: Install a Cross-Origin Browser Plugin to Disable Cross-Origin Reporting

This plugin is not all-powerful. Please carefully read and learn about browser security policy related knowledge. The official team will not respond to comments from those who don’t understand these concepts and just make random complaints.

When using Google Chrome to debug AJAX requests, you may encounter these two issues:

Cross-Origin Resource Sharing (CORS): See CORS

Cross-Origin Read Blocking (CORB): See CORB

The most common issue is about Cross-Origin Resource Sharing, which is what we typically refer to as cross-origin. When previewing a local server page and using AJAX to access remote server content, the request will fail. For example, the local preview address is http://localhost:8080/, and the API address being accessed is http://dcloud.io/api.

If it is just for local preview, you can use a Chrome browser plugin to assist with debugging.

!!! This plugin can only solve cross-origin debugging for simple requests (click to search what is a simple request). For non-simple request OPTION preflight requests (click to search what is a preflight request) and users who have cross-origin requirements on production servers, they need to cooperate with the server-side solution.

# Chrome Plugin Name: Allow-Control-Allow-Origin: *

# Installation Method:

Online Installation

Use Google Chrome to directly open the plugin address: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi and install it.

Offline Installation

If domestic users cannot install online, they can download the attachment at the bottom of this page for offline installation.

After downloading: Allow-Control-Allow-Origin.crx

Click the menu button in the top right of the browser to open Google Chrome’s extension management page.

Drag the downloaded extension plugin into the extension management page.

# Usage

Open the page to be debugged.

Find the installed plugin in the extensions column and click to open the plugin configuration.

Enter the address of the API you want to debug cross-origin and click add.

# Notes

This plugin is suitable for local debugging. If the production deployment has a different domain from the API, server cooperation is still required.

If the actual response content differs from what the browser expects, it may still be blocked by the CORB policy.

# Firefox Cross-Origin Plugin

Firefox cross-origin plugin (note Firefox’s CSS compatibility issues)

2025.4.28 Test

Using HBuilder to develop Vue, local environment test:

– Local: http://localhost:8080 has cross-origin issues

– Network: http://192.168.8.109:8080 can test normally