java微服务前端跨域怎么调用

Java微服务前端跨域调用需要配置CORS（跨域资源共享）、使用反向代理、启用JSONP。跨域资源共享（CORS）是最常用和推荐的方式，因为它是标准的解决方案，能够灵活地配置允许哪些域名访问资源。CORS通过在服务器端设置响应头字段来允许特定的跨域请求。下面将详细描述如何在Java微服务中配置CORS。

一、CORS配置

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种允许Web应用服务器进行跨域访问控制的机制。它使用额外的HTTP头来告诉浏览器允许Web应用从不同域请求资源。

Spring Boot配置CORS：

在Spring Boot应用中，可以通过配置类来启用CORS。创建一个配置类并使用@Configuration注解，然后使用WebMvcConfigurer接口来配置CORS规则。例如：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/")
                .allowedOrigins("http://localhost:3000") // 允许的域名
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

这种方式非常灵活，可以根据需要配置允许的域名、方法、头部信息等。

全局CORS配置：

如果需要全局应用CORS，可以在Spring Boot的主类中添加一个CORS过滤器：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://localhost:3000");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/", config);
        return new CorsFilter(source);
    }
}

这种方式适用于需要为所有控制器统一配置CORS的情况。

二、使用反向代理

反向代理是一种服务器设置，它代理客户端请求，获取资源并返回给客户端。通过配置反向代理，可以避免CORS问题，因为客户端请求的域名和服务器响应的域名是相同的。

Nginx反向代理：

在Nginx中，可以通过配置反向代理来解决跨域问题。例如：

server {
    listen 80;
    server_name yourdomain.com;
    location /api/ {
        proxy_pass http://backend_server:8080/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

在这个配置中，所有以/api/开头的请求都会被转发到http://backend_server:8080/api/，从而避免跨域问题。

Spring Cloud Gateway：

如果使用Spring Cloud微服务架构，可以通过Spring Cloud Gateway来实现反向代理和路由。例如：

import org.springframework.cloud.gateway.route.RouteLocator;
import org.springframework.cloud.gateway.route.builder.RouteLocatorBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class GatewayConfig {
    @Bean
    public RouteLocator customRouteLocator(RouteLocatorBuilder builder) {
        return builder.routes()
                .route("api_route", r -> r.path("/api/")
                        .uri("http://backend_server:8080"))
                .build();
    }
}

这种方式适用于使用Spring Cloud微服务架构的项目，通过Gateway可以方便地管理和配置服务的路由。

三、启用JSONP

JSONP（JSON with Padding）是一种解决跨域问题的非标准方法，主要用于GET请求。虽然JSONP已经逐渐被CORS替代，但在一些旧系统或特定场景中仍然有使用的必要。

前端代码：

在前端，可以通过动态创建<script>标签来实现JSONP请求。例如：

function jsonpRequest(url, callback) {
    const script = document.createElement('script');
    const callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
    window[callbackName] = function(data) {
        delete window[callbackName];
        document.body.removeChild(script);
        callback(data);
    };
    script.src = `${url}?callback=${callbackName}`;
    document.body.appendChild(script);
}
jsonpRequest('http://backend_server:8080/api/data', function(data) {
    console.log(data);
});

这种方式适用于简单的GET请求，但不适用于POST、PUT、DELETE等复杂请求。

服务器端代码：

在服务器端，需要返回带有回调函数的JSON数据。例如：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class JsonpController {
    @GetMapping("/api/data")
    public String getData(@RequestParam("callback") String callback) {
        String data = "{\"name\": \"John\", \"age\": 30}";
        return callback + "(" + data + ")";
    }
}

这种方式在现代Web开发中使用较少，但在特定场景下仍然可以作为一种解决方案。

四、其他方法

除了CORS、反向代理和JSONP，还有一些其他方法可以解决跨域问题，这些方法根据具体的项目需求和架构选择合适的解决方案。

使用iframe：

通过在父页面中嵌入iframe，并利用postMessage进行通信，可以绕过跨域限制。例如：

<iframe id="myIframe" src="http://backend_server:8080/api/data" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('myIframe');
    iframe.onload = function() {
        iframe.contentWindow.postMessage('getData', 'http://backend_server:8080');
    };
    window.addEventListener('message', function(event) {
        if (event.origin === 'http://backend_server:8080') {
            console.log(event.data);
        }
    });
</script>

这种方式适用于需要在同一页面中展示来自不同域的数据。

WebSockets：

WebSockets是一种双向通信协议，可以通过长连接实现跨域通信。通过在服务器端和客户端配置WebSocket，可以实现实时的数据传输。例如：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/ws")
                .setAllowedOrigins("http://localhost:3000");
    }
}

在前端，可以使用WebSocket API进行连接：

const socket = new WebSocket('ws://backend_server:8080/ws');
socket.onmessage = function(event) {
    console.log(event.data);
};
socket.onopen = function() {
    socket.send('Hello Server');
};

这种方式适用于需要实时通信的应用，例如聊天系统、在线游戏等。

Server-Side Rendering (SSR)：

通过在服务器端渲染页面，可以避免跨域请求。例如，使用Next.js或Nuxt.js等框架进行SSR，可以在服务器端获取数据并渲染，返回给客户端的HTML已经包含了所需的数据。

// Next.js API Route
export default async (req, res) => {
    const response = await fetch('http://backend_server:8080/api/data');
    const data = await response.json();
    res.status(200).json(data);
};

在前端页面中可以直接调用这个API Route，从而避免跨域问题。

GraphQL：

通过GraphQL可以在一个请求中获取多个资源，减少跨域请求的次数。例如：

import com.coxautodev.graphql.tools.GraphQLQueryResolver;
import org.springframework.stereotype.Component;
@Component
public class Query implements GraphQLQueryResolver {
    public User getUser(String id) {
        return new User(id, "John", 30);
    }
}

在前端，可以使用Apollo Client进行请求：

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
    uri: 'http://backend_server:8080/graphql',
    cache: new InMemoryCache()
});
client.query({
    query: gql`
        query {
            user(id: "1") {
                name
                age
            }
        }
    `
}).then(result => console.log(result));