通过 HTTPS 页面的 HTTP Ajax 请求

Question

我有一个网站，其中一些页面使用 HTTPS 连接。在这些 HTTPS 页面中，我必须使用 HTTP Ajax 请求来检索一些错误，例如空白字段。但是此错误消息不会出现。是否有任何解决方案，或者我必须发出 AJAX 请求才能在 HTTPS 连接上归档？

Answer 1

由于Same Origin Policy，这是不可能的。

您也需要将 Ajax 请求切换到 https。

Answer 2

如果没有任何服务器端解决方案，安全页面只有一种方式可以从不安全的页面/请求中获取信息，这就是 postMessage 和弹出窗口

我说弹出窗口是因为该网站不允许混合内容。但是弹出窗口并没有真正混合。它有自己的窗口，但仍然可以通过 postMessage 与开启者通信。

因此，您可以使用 window.open(...) 打开一个新的 http 页面并让该页面为您发出请求

---

XDomain 是我写这篇文章的时候想到的，但这是一种使用新 fetch api 的现代方法，优点是大文件的流式传输，缺点是它不适用于所有浏览器

您将此代理脚本放在任何 http 页面上

onmessage = evt => {
  const port = evt.ports[0]

  fetch(...evt.data).then(res => {
    // the response is not clonable
    // so we make a new plain object
    const obj = {
      bodyUsed: false,
      headers: [...res.headers],
      ok: res.ok,
      redirected: res.redurected,
      status: res.status,
      statusText: res.statusText,
      type: res.type,
      url: res.url
    }

    port.postMessage(obj)

    // Pipe the request to the port (MessageChannel)
    const reader = res.body.getReader()
    const pump = () => reader.read()
    .then(({value, done}) => done 
      ? port.postMessage(done)
      : (port.postMessage(value), pump())
    )

    // start the pipe
    pump()
  })
}

然后您在 https 页面中打开一个弹出窗口（请注意，您只能在用户交互事件中执行此操作，否则它将被阻止）

window.popup = window.open(http://.../proxy.html)

创建你的实用函数

function xfetch(...args) {
  // tell the proxy to make the request
  const ms = new MessageChannel
  popup.postMessage(args, '*', [ms.port1])

  // Resolves when the headers comes
  return new Promise((rs, rj) => {

    // First message will resolve the Response Object
    ms.port2.onmessage = ({data}) => {
      const stream = new ReadableStream({
        start(controller) {

          // Change the onmessage to pipe the remaning request
          ms.port2.onmessage = evt => {
            if (evt.data === true) // Done?
              controller.close()
            else // enqueue the buffer to the stream
              controller.enqueue(evt.data)
          }
        }
      })

      // Construct a new response with the 
      // response headers and a stream
      rs(new Response(stream, data))
    }
  })
}

然后像平常一样使用 fetch api 发出请求

xfetch('http://httpbin.org/get')
  .then(res => res.text())
  .then(console.log)

Answer 3

不过，这可以通过以下步骤完成：

1. 向您的网站（同一域）发送 https ajax 请求

   jQuery.ajax({
       'url'      : '//same_domain.com/ajax_receiver.php',
       'type'     : 'get',
       'data'     : {'foo' : 'bar'},
       'success'  : function(response) {
           console.log('Successful request');
       }
   }).fail(function(xhr, err) {
       console.error('Request error');
   });
   

2. 获取 ajax 请求，例如通过 php，并通过 http 向任何所需的网站发出 CURL 获取请求。

   use linslin\yii2\curl;
   $curl = new curl\Curl();
   $curl->get('http://example.com');
   

Answer 4

在某些情况下，可以在没有 SSL 证书的情况下向 TCP 服务器发送没有响应的单向请求。与 HTTP 服务器相比，TCP 服务器会捕获您的请求。但是，将无法访问从浏览器发送的任何数据，因为浏览器不会在没有积极的证书检查的情况下发送任何数据。在特殊情况下，即使是没有任何数据的裸 TCP 信号也足以执行某些任务。例如，局域网内的物联网设备启动与外部服务的连接。 Link

这是一种“唤醒”触发器，可以在没有任何安全措施的端口上工作。

如果需要响应，可以使用安全的公共 https 服务器来实现，该服务器可以使用例如将所需数据发送回浏览器。网络套接字。

Answer 5

我创建了一个名为cors-bypass 的模块，它允许您在不需要服务器的情况下执行此操作。它使用postMessage发送跨域事件，用于提供模拟HTTP API（fetch、WebSocket、XMLHTTPRequest等）。

它与answer by Endless 基本相同，但无需更改代码即可使用它。

使用示例：

import { Client, WebSocket } from 'cors-bypass'

const client = new Client()

await client.openServerInNewTab({
  serverUrl: 'http://random-domain.com/server.html',
  adapterUrl: 'https://your-site.com/adapter.html'
})

const ws = new WebSocket('ws://echo.websocket.org')
ws.onopen = () => ws.send('hello')
ws.onmessage = ({ data }) => console.log('received', data)

Answer 6

在 server.js 中创建一个绕过 API。这对我有用。

app.post('/by-pass-api',function(req, response){
  const url = req.body.url;
  console.log("calling url", url);
  request.get(
    url,
    (error, res, body) => {
      if (error) {
        console.error(error)
        return response.status(200).json({'content': "error"}) 
}
        return response.status(200).json(JSON.parse(body))
        },
      )
    })

并使用 axios 调用它或像这样获取：

const options = {
     method: 'POST',
     headers: {'content-type': 'application/json'},
     url:`http://localhost:3000/by-pass-api`, // your environment 
     data: { url },  // your https request here
    };

Answer 7

从 javascript 我尝试了几种方法，但我做不到。

您需要一个服务器端解决方案，例如在 c# 上，我确实创建了一个控制器来调用 http，然后反序列化对象，结果是当我从 javascript 调用时，我正在从我的 @ 发出请求987654321@ 到我的 htpps:// 域。请看我的c#代码：

[Authorize]
public class CurrencyServicesController : Controller
{
    HttpClient client;
    //GET: CurrencyServices/Consultar?url=valores?moedas=USD&alt=json
    public async Task<dynamic> Consultar(string url)
    {
        client = new HttpClient();
        client.BaseAddress = new Uri("http://api.promasters.net.br/cotacao/v1/");
        client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
        System.Net.Http.HttpResponseMessage response = client.GetAsync(url).Result;

        var FromURL = response.Content.ReadAsStringAsync().Result;

        return JsonConvert.DeserializeObject(FromURL);
    }

让我向你展示我的客户端（Javascript）

<script async>
$(document).ready(function (data) {

    var TheUrl = '@Url.Action("Consultar", "CurrencyServices")?url=valores';
    $.getJSON(TheUrl)
        .done(function (data) {
            $('#DolarQuotation').html(
                '$ ' + data.valores.USD.valor.toFixed(2) + ','
            );
            $('#EuroQuotation').html(
                '€ ' + data.valores.EUR.valor.toFixed(2) + ','
            );

            $('#ARGPesoQuotation').html(
                'Ar$ ' + data.valores.ARS.valor.toFixed(2) + ''
            );

        });       

});

希望对您有所帮助！ 问候