4 Effective Ways to Solve Cross-Origin Issues in Local Development

What is Cross-Origin?

Cross-origin is restricted by the browser's same‑origin policy; any request whose protocol, domain, or port differ is considered cross‑origin.

Common Solutions for Cross-Origin

Typically used in local testing or when front‑end and back‑end are deployed separately.

1. webpack proxyTable

Add a proxy configuration in webpack.dev.js:

proxy: {
  '/api': {
    changeOrigin: true,
    target: 'http://******.*****.com'
  }
}

If front‑end and back‑end prefixes differ, use pathRewrite to unify:

proxy: {
  '/EntryApp': {
    changeOrigin: true,
    target: 'http://******.*******.com',
    pathRewrite: {"^/EntryApp": "/EntryApp"}
  }
}

Potential issues with proxyTable

Cookie loss, API inaccessible

POST requests may return 403

2. SwitchHosts

SwitchHosts is an open‑source tool for managing and quickly switching Hosts files. It requires administrator rights to edit the mapping.

After opening SwitchHosts, configure the mapping in Myhost; ensure the file is writable. Different environments can use separate files.

Common issues with SwitchHosts

Default port is 80; configure a different port if needed.

The browser may prioritize proxy tool settings.

3. Uuaper

Uuaper, provided by Baidu, is a Node.js‑based tool to solve front‑end cross‑origin problems, requiring Node.js and supporting automatic authentication.

var express = require('express');
var app = express();

var uuaper = require('uuaper');
app.use('/api', new uuaper({
  target: 'http://xxx.xxx.com/',
  debug: true,
  auth: {
    server: 'http://xxx.baidu.com/login?',
    username: 'xxx',
    password: 'xxx'
  }
}));

4. Nginx

Nginx is a free, open‑source high‑performance HTTP and reverse‑proxy server, commonly used when front‑end and back‑end are deployed separately.

The main configuration file nginx.conf consists of sections such as main, events, http, and server.

Basic Nginx cross‑origin solution

Configure proxy_pass in the server block:

// Front‑end domain: fe.**.com
// Back‑end domain: dev.**.com
server {
    listen 80;
    server_name fe.**.com;
    location / {
        proxy_pass dev.**.com;
    }
}

Additional directives can be added as needed, e.g., proxy_connect_timeout, proxy_cookie_domain, proxy_cookie_path, proxy_set_header.