运行AngularJS HTML代码时，如何解决缺少'Access-Control-Allow-Origin'头的问题

架构老林

2026-5-15

嘿，这个CORS错误我简直天天见——说白了就是浏览器的同源策略在搞事情：你的AngularJS前端和后端API不在同一个域名（或者端口、协议）下，浏览器会默认拒绝这种跨域请求，除非后端明确给你发个Access-Control-Allow-Origin响应头放行。

下面给你分场景列几个最实用的解决办法，按需选就行：

1. 后端配置（最根本的解决方案）

这是生产环境首选的方式，直接在后端添加CORS允许规则，让后端明确告诉浏览器“这个前端可以访问我”。给你几个常见后端的示例：

Node.js/Express：用cors中间件最方便
先安装依赖：

npm install cors

然后在你的Express服务里配置：

const express = require('express');
const cors = require('cors');
const app = express();

// 只允许你的AngularJS前端域名访问（比如本地开发的http://localhost:8080）
app.use(cors({ origin: 'http://localhost:8080' }));

// 开发环境临时允许所有源（生产环境绝对别用！）
// app.use(cors());

Java/Spring Boot：可以单接口配置也可以全局配置
单接口放行：

@RestController
public class DataController {
    @CrossOrigin(origins = "http://localhost:8080")
    @GetMapping("/api/get-data")
    public ResponseEntity<String> fetchData() {
        return ResponseEntity.ok("数据来了！");
    }
}

全局配置所有接口：

@Configuration
public class GlobalCorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

PHP：直接在接口开头添加响应头

// 允许指定前端域名
header("Access-Control-Allow-Origin: http://localhost:8080");
// 允许的请求方法
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
// 允许的请求头
header("Access-Control-Allow-Headers: Content-Type");

2. 本地开发用代理转发（不用改后端）

如果你只是本地开发测试，不想折腾后端配置，可以给AngularJS项目加个代理，让前端请求先转发到后端，这样浏览器看到的是同源请求，就不会拦你了。

比如用gulp-connect配代理：

const gulp = require('gulp');
const connect = require('gulp-connect');
const proxy = require('http-proxy-middleware');

gulp.task('serve', function() {
  connect.server({
    root: 'app', // 你的AngularJS项目根目录
    port: 8080, // 前端运行端口
    middleware: function(connect, opt) {
      return [
        // 把所有/api开头的请求转发到后端地址
        proxy('/api', {
          target: 'http://localhost:3000', // 你的后端API地址
          changeOrigin: true
        })
      ];
    }
  });
});

之后前端请求/api/get-data就会自动转发到http://localhost:3000/api/get-data，完美绕开跨域。

3. JSONP（仅限GET请求，应急用）

如果后端没法改配置，而且你的请求都是GET类型，可以试试JSONP——这是一种老的跨域方案，原理是利用script标签不受同源策略限制。

首先后端要支持返回JSONP格式的响应：

// Node.js示例
app.get('/api/get-data', (req, res) => {
  const callbackName = req.query.callback; // 获取前端传的回调函数名
  const data = { content: "这是JSONP返回的数据" };
  res.send(`${callbackName}(${JSON.stringify(data)})`); // 返回包裹后的JS代码
});

然后AngularJS用$http.jsonp请求：

$http.jsonp('http://你的后端地址/api/get-data?callback=JSON_CALLBACK')
  .then(function(response) {
    console.log('拿到数据了：', response.data);
  });

⚠️ 注意：JSONP只能处理GET请求，而且有安全风险，生产环境尽量不用。

4. 服务器端反向代理（后端不能改时的生产方案）

如果后端完全没法修改，又要在生产环境解决跨域，可以用Nginx或者Apache做反向代理，让前端和API看起来在同一个域名下。

比如Nginx配置示例：

server {
    listen 80;
    server_name your-frontend.com; // 你的前端域名

    // 把所有/api开头的请求转发到后端API
    location /api {
        proxy_pass http://your-backend-api.com; // 后端API地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    // 处理前端静态文件
    location / {
        root /usr/share/nginx/html; // 你的AngularJS项目打包后的目录
        try_files $uri $uri/ /index.html;
    }
}

这样用户访问your-frontend.com/api/get-data时，Nginx会悄悄把请求转发到后端，浏览器全程看到的是同一个域名，自然不会有跨域问题。

最后提醒一句：生产环境一定要严格限制允许的源，别用*（允许所有域名），不然会有安全风险！

内容的提问来源于stack exchange，提问作者Sikandar Sahab