首先咱们拆解下问题根源：你遇到的这个报错是浏览器同源策略导致的。浏览器会限制前端脚本直接请求不同域名的资源，除非目标服务器返回了允许你当前域名访问的Access-Control-Allow-Origin响应头。本地环境能正常运行，是因为localhost属于浏览器的“信任域名”，跨域限制会宽松很多，但线上正式域名就会触发严格的跨域检查。

另外要注意：NewsAPI本身明确要求请求必须在服务器端发起，不支持前端浏览器直接调用，所以直接在前端写请求肯定会碰到CORS问题。

解决方案 #

1. 搭建服务器端代理（生产环境推荐） #

你需要写一个简单的后端接口，让前端请求自己的后端服务，再由后端去调用NewsAPI，最后把结果返回给前端。这样就能绕开浏览器的跨域限制，还能保护你的API密钥（绝对不能把密钥暴露在前端代码里）。

给你一个Node.js + Express的代理示例：

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;

// 允许你的前端域名访问代理接口
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://www.example.com');
  next();
});

// 代理NewsAPI的接口
app.get('/api/top-tech-news', async (req, res) => {
  try {
    const apiResponse = await axios.get('https://newsapi.org/v2/top-headlines', {
      params: {
        country: 'in',
        category: 'technology',
        apiKey: '你的NewsAPI密钥' // 密钥存在后端，安全不暴露
      }
    });
    res.json(apiResponse.data);
  } catch (err) {
    res.status(err.response?.status || 500).json(err.response?.data || {msg: '请求失败'});
  }
});

app.listen(PORT, () => {
  console.log(`代理服务器运行在 ${PORT} 端口`);
});

然后修改前端代码，请求自己的代理接口：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj, i, x = "";
        myObj = JSON.parse(this.response);
        // 修复循环语法错误，遍历所有文章
        for (i=0; i<myObj.articles.length; i++) {
            // 用模板字符串拼接更清晰，避免引号嵌套问题
            x += `<a href="${myObj.articles[i].url}" target="_blank">`;
            x += `<div style="background: linear-gradient(rgba(0,130,170,0),rgba(6,23,0,1)), url(${myObj.articles[i].urlToImage});height: 430px;margin-top: 20px;"></div>`;
            x += "</a>";
        }
        document.getElementById("technology").innerHTML = x;
    }
};
// 请求自己的后端代理接口
xmlhttp.open("GET", "https://你的后端域名/api/top-tech-news", true);
xmlhttp.send();

2. 开发环境临时调试方案（仅本地用） #

如果只是开发阶段想快速测试，可以用浏览器跨域扩展（比如Chrome的Allow CORS: Access-Control-Allow-Origin），或者在webpack-dev-server里配置代理，但这些方法绝对不能用于生产环境。

顺便修复你代码里的小问题 #

你的for循环语法写错了：for (i=0;i<1;i++ in myObj.articles) 会导致循环只执行一次，而且语法不规范。改成for (i=0; i<myObj.articles.length; i++)才能遍历所有新闻文章。另外用模板字符串拼接HTML，能避免引号嵌套的错误，代码可读性也更高。

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