无服务器权限时，如何在AngularJS中绕过'Access-Control-Allow-Origin'检查？

这种情况我之前开发时也碰到过好几次——明明Network里能看到接口返回了正确数据，可前端就是拿不到还报No 'Access-Control-Allow-Origin' header is present的错，关键还碰上个没法改服务器配置的情况。给你几个亲测有效的解决办法：

1. 用Chrome跨域插件快速绕过（仅开发调试用） #

直接装个Chrome的CORS插件，比如Allow CORS: Access-Control-Allow-Origin，安装后点击插件图标开启，浏览器就会自动忽略跨域检查，你的前端代码就能正常拿到接口返回的数据了。

注意：这个方法只适合本地开发调试用，绝对不能让用户在生产环境用，毕竟会降低浏览器的安全防护。

2. 本地搭建反向代理服务器 #

自己搭个简单的代理服务器，把前端的请求转发到目标接口——因为服务器之间的请求不受浏览器CORS规则限制，完美绕开跨域问题。

举个Node.js+Express的极简例子：
首先安装依赖：

npm install express http-proxy-middleware

然后写个代理脚本proxy.js：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 把/api开头的请求转发到目标接口
app.use('/api', createProxyMiddleware({
  target: 'https://你要请求的接口域名.com',
  changeOrigin: true, // 关键：修改请求头里的Origin为目标域名
  pathRewrite: { '^/api': '' } // 如果需要去掉/api前缀可以加这个
}));

app.listen(3000, () => {
  console.log('代理服务器跑在 http://localhost:3000 啦');
});

启动代理：node proxy.js，然后前端把请求地址改成http://localhost:3000/api/xxx就行。

如果是Vue/React这类框架，还能直接在开发服务里配置代理，不用单独搭服务器：

• Vue项目在vue.config.js里加：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://目标接口域名.com',
        changeOrigin: true
      }
    }
  }
}

• React项目可以用setupProxy.js（需安装http-proxy-middleware）：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://目标接口域名.com',
      changeOrigin: true,
    })
  );
};

3. 用油猴脚本Tampermonkey注入请求 #

如果是在别人的页面上调试（比如你要爬取某个网站的接口数据），可以写个油猴脚本——油猴脚本的运行权限比普通页面脚本高，发起的请求不受页面Origin限制。

举个简单的脚本例子：

// ==UserScript==
// @name         跨域请求测试
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  绕过CORS请求目标接口
// @author       You
// @match        http://someorigin.com/* // 你要运行脚本的页面域名
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    // 用GM_xmlhttpRequest发起请求，不受CORS限制
    GM_xmlhttpRequest({
        method: 'GET',
        url: 'https://目标接口地址.com/xxx',
        onload: function(response) {
            console.log('接口返回数据：', response.responseText);
            // 这里可以把数据传给页面的代码，或者直接处理
        }
    });
})();

4. 临时调试：直接从Network里复制数据 #

如果只是临时看数据或者调试逻辑，不用改代码的话，直接在Chrome Network标签里找到对应的请求，右键选择「Copy」→「Copy response」，把数据复制出来存成JSON文件，然后前端本地读取这个文件来调试就行。

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