Javascript 通过HTTPS页面的HTTP Ajax请求

我有一个关于HTTPS连接的一些页面的网站。在这些HTTPS页面中，我必须使用HTTP Ajax请求来检索一些错误，比如空白字段。但是这个错误信息不会出现。是否有任何解决方案，或者我必须在HTTPS连接上请求AJAX文件？

这是不可能的，因为

---

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

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

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

---

如果需要响应，可以使用安全的公共https服务器实现，该服务器可以使用WebSocket等将所需数据发送回浏览器。

仍然可以通过以下步骤完成：

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

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

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

---

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

我说弹出，因为该网站不允许混合内容。但弹出窗口并不是真正的混合。它有自己的窗口，但仍然能够通过postMessage与开场白进行通信

因此，您可以使用

窗口打开一个新的http页面。打开（…）

并让它为您发出请求

---

当我写这篇文章时，我想到了这一点，但这里有一个使用新的现代方法，其优点是大文件流，缺点是它不能在所有浏览器中工作

您可以将此代理脚本放在任何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页面中打开一个弹出窗口（请注意，您只能在用户交互事件中执行此操作，否则将被阻止）

创建你的实用函数

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))
    }
  })
}

并像通常使用fetchapi那样发出请求

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

---

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

您需要一个服务器端解决方案，例如在c上，我创建了一个调用http的控制器，对对象进行反序列化，结果是，当我从javascript调用时，我正在从我的htpps://domain. 请查看我的c#代码：

[授权]
公共类CurrencyServicesController:控制器
{
HttpClient；
//GET:CurrencyServices/Consultar？url=valores？moedas=USD&alt=json
公共异步任务顾问（字符串url）
{
client=新的HttpClient（）；
client.BaseAddress=新Uri（“http://api.promasters.net.br/cotacao/v1/");
client.DefaultRequestHeaders.Accept.Add（新的System.Net.Http.Headers.MediaTypeWithQualityHeaderValue（“应用程序/json”）；
System.Net.Http.HttpResponseMessage response=client.GetAsync（url）.Result；
var FromURL=response.Content.ReadAsStringAsync（）.Result；
返回JsonConvert.DeserializeObject（FromURL）；
}

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

$（文档）.ready（函数（数据）{
var TheUrl='@Url.Action（“Consultar”，“CurrencyServices”）？Url=valores'；
$.getJSON（URL）
.完成（功能（数据）{
$（'#dolarquote'）.html(
“$”+data.valores.USD.valor.toFixed（2）+.”
);
$（'#EuroQuotence'）.html(
“€”+数据.价值.欧元价值.固定汇率（2）+”
);
$（'#ARGPesoQuotation'）.html(
“Ar$”+data.valores.ARS.valor.toFixed（2）+”
);
});       
});

我希望这对你有帮助！

---

问候语

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

fetch

，

WebSocket

，

XMLHTTPRequest

等）

它基本上与的相同，但使用它不需要更改代码

用法示例：

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)

---

在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或fetch将其命名为：

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

---

ajax应该可以在https上正常运行，您可以发布实际的代码片段吗？听起来像SOP（）：架构不同，所以它是不同的来源。谢谢你的回答。我已经相应地更改了我的网站。即使是跨来源资源共享的工作草案也无法做到：谢谢大家的回答。我已经根据同一来源策略更改了我的网站。@NickSotiros为什么不希望它安全？没有关闭HTTPS页面上的HTTP请求可能会受到MITM的攻击，从而注入恶意JS。@ceejayoz如果你下载JS脚本并执行它，你可能会受到MITM的攻击。但是，如果你只想在css中使用其他人的背景图像或下载youtube视频，你就不能。为什么浏览器会假定这些内容通过ajax请求加载的将是javascript来执行？有一个网站允许您使用从外部资源拉入的在线内容生成在线演示文稿，它们必须使用代理。@NickSotiros实际上有些人css可以连接到输入，并将这些输入中输入的所有数据发送到一个坏的服务器。这个概念奏效了完美（使用与我的设置/项目相关的代码）。我在服务器上创建了一个php文件，并在HTTP Url上执行了一个curl请求。我从HTTPS网站调用了这个文件，并发送了API所需的变量。瞧！我只知道may endpoint，如何使用它

<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) + ''
            );

        });       

});

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)

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))
        },
      )
    })

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