第一步：修改請求頭與序列化方式

// 正確配置示例
$http({
  method: 'POST',
  url: '/api/submit',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  data: $httpParamSerializerJQLike({
    name: '阿里云',
    product: 'ECS'
  })
}).then(function(response){
  // 成功回調(diào)
});

關鍵點：

• 引入angular-sanitize.js啟用$httpParamSerializerJQLike
• 顯式設置Content-Type請求頭

第二步：后端添加跨域支持

在Spring Boot中添加配置類：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
      .allowedOrigins("*")
      .allowedMethods("GET", "POST")
      .allowedHeaders("*");
  }
}

第三步：使用阿里云API網(wǎng)關統(tǒng)一管理

通過阿里云API網(wǎng)關解決前后端協(xié)議差異：

# 在網(wǎng)關配置中設置參數(shù)映射
x-aliyun-apigateway-api-backend:
  requestParameters:
    - location: 'Query'
      name: 'backendName'
      value: '$input.params().path.name'