Cross-Domain Issues in Frontend-Backend Data Interaction

Understanding Cross-Domain Problems

Problem Description

In a typical development setup, a Vue.js frontend might run on port 9000 while a Spring Boot backend operates on port 8080. This configuration often triggers cross-domain issues when the frontend attempts to communicate with the backend.

What is Cross-Domain?

A cross-domain request occurs when any of the protocol, domain, or port in the requested URL differs from those of the current page URL.

Why Cross-Domain Issues Occur

Cross-domain issues result from the browser's same-origin policy, which is a fundamental security mechanism. The same-origin policy prevents JavaScript code on one domain from interacting with content from another domain. A resource's origin is defined by its protocol, host, and port. Without this policy, web applications could be vulnerable to various attacks, as malicious scripts could potentially access sensitive data from other sites.

Solutions to Cross-Domain Issues

Backend Solution: Spring Boot Configuration

Method 1: Backend CORS Configuration

One approach is to configure Cross-Origin Resource Sharing (CORS) on the Spring Boot backend.

First, create a configuration class for Web MVC settings:

@Configuration
public class WebAppConfig implements WebMvcConfigurer {

    /**
     * Configure CORS mappings for the application
     * @param registry CorsRegistry for configuring CORS
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // Allow CORS for all endpoints under /api/**
        registry.addMapping("/api/**")
                // Allow credentials to be included in requests
                .allowCredentials(true)
                // Specify allowed HTTP methods
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                // Set allowed origins (uncomment to restrict)
                // .allowedOrigins("http://localhost:8080");
    }
}

If your frontend needs to send cookies or authentication headers, ensure you configure both the backend and frontend appropriatley.

Method 2: Controller-Level CORS Annotation

For more granular control, you can apply the @CrossOrigin annotation directly to controller methods:

@RestController
@RequestMapping("/api/users")
public class UserController {

    @GetMapping("/{id}")
    @CrossOrigin(origins = "http://localhost:8080")
    public User getUserById(@PathVariable Long id) {
        // Implementation
        return userService.findById(id);
    }
}

Frontend Solution: Vue.js Proxy Configuration

Alternativeyl, you can configure a proxy on the Vue.js frontend to bypass cross-domain restrictions:

Step 1: Configure Proxy in vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // Backend server URL
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // Remove /api prefix when forwarding
        }
      }
    }
  }
}

Step 2: Update API Environment Configuration

In your environment configuration file (e.g., .env.development):

VUE_APP_API_BASE_URL=/api

Then use this environment variable in your API service configuration:

// In your API service file
const apiBaseUrl = process.env.VUE_APP_API_BASE_URL;

// Example API call
axios.get(`${apiBaseUrl}/users`)
  .then(response => {
    // Handle response
  })
  .catch(error => {
    // Handle error
  });

This proxy approach allows your frontend to make requests to the same domain (localhost:8080), which the browser treats as same-origin, while the proxy server forwards these requests to your actual backend API.