如何在HTML中使用AJAX跨域访问服务器文件？

发布于
2024-12-27 云南

在html文件中使用ajax访问我的服务器上的文件，为什么会报跨域，应该如何解决？

// 加载网络资源
    function getPDBByURL() {
      const element = document.querySelector('.viewer_3Dmoljs');
      let config = { backgroundColor: "gray" };
      let viewer = $3Dmol.createViewer( element, config );
      let pdbUri = 'http://xxx/3dmol_pdb/t1.pdb';
      $.ajax({
        url: pdbUri,
        type: 'GET',
        beforeSend: function(xhr) {
          // 设置请求头
          xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        },
        success: function(data) {
          let v = viewer;
          v.addModel( data, "pdb" );                       /* load data */
          v.setStyle({}, {cartoon: {color: 'spectrum'}});  /* style all atoms */
          v.zoomTo();                                      /* set camera */
          v.render();                                      /* render scene */
          v.zoom(1.2, 1000);                               /* slight zoom */
        },
        error: function(hdr, status, err) {
          console.error( "Failed to load PDB " + pdbUri + ": " + err );
        },
      });
    }

使用postman可以获取到数据：

希望能告诉我怎么样获取这个文件

ajax cors html javascript

阅读 725

AI BotBETA

### 问题解答

在HTML中使用AJAX跨域访问服务器文件时，报错跨域（CORS，Cross-Origin Resource Sharing）问题，是因为浏览器的同源策略（Same-Origin Policy）阻止了跨域请求。`Access-Control-Allow-Origin` 是一个响应头，而不是请求头，因此你不能在客户端的 AJAX 请求中通过 `xhr.setRequestHeader` 设置它来解决跨域问题。这个响应头需要在服务器端设置。

#### 解决方案

1. **服务器端设置 CORS 头**：
   在你的服务器（`http://xxx`）上配置 CORS，允许来自你网页源的请求。这通常涉及修改服务器配置或添加中间件来设置 `Access-Control-Allow-Origin` 响应头。

   - 如果你是使用 Node.js，可以使用 `cors` 中间件。
   - 如果是 Apache 服务器，可以在配置文件中添加 `Header set Access-Control-Allow-Origin "*"`。
   - 如果是 Nginx，可以在配置文件中添加 `add_header 'Access-Control-Allow-Origin' '*' always;`。

2. **使用 JSONP（如果服务器支持）**：
   如果服务器支持 JSONP，你可以使用 JSONP 作为跨域请求的替代方案。不过，JSONP 只支持 GET 请求，并且不如 CORS 灵活和安全。

3. **使用代理服务器**：
   如果你的前端和后端不能直接通信，你可以设置一个代理服务器来转发请求。这样，前端就可以向代理服务器发送请求，而代理服务器再向目标服务器发送请求，从而绕过跨域限制。

4. **修改前端部署策略**：
   如果可能，将前端代码部署到与后端相同的域或子域下，这样就不会触发跨域问题。

在你的示例中，你应该联系服务器的管理员或维护者，请求他们在服务器上设置适当的 CORS 策略。一旦服务器端正确配置了 CORS，你的 AJAX 请求就应该能够成功获取数据了。

2 个回答

得票最新