jQuery ajax调用返回URL并加载到框架或div中

Posted 2023-01-07

我有一个客户端Web应用程序，它是所有静态html和javascript，并且我使用JQuery。我更多地是使用Spring的后端/中间件人员，因此我对前端的东西并不满意。

我有一个RESTful API，从我的客户端UI到我作为控制器编写的以Spring编写的中间件Web应用程序。我可以成功地调用它，并且存在中间件业务逻辑，在该逻辑中我可以使用第三方API并返回HTML。我将此HTML返回给客户端，并试图将其加载到iframe或div标签中。当然，我遇到了各种JavaScript错误和很多CORS问题。因此，如果这不是从另一个网站获取HTML并将其部署在我的页面上的可行选择，那么我愿意放手。

我在后端创建了另一个RESTful API，现在它仅返回该第三方RESTful API的URL。具体来说，我正在调用Coinbase的授权页面，但是它很容易就是任何其他第三方授权页面。我有他们推荐的完整URL，并且已经准备好使用它。

所以，我得到了这样的URL（dataType是'文本'），并且可以看到它并发出警报：

https://www.coinbase.com/oauth/authorize?
  response_type=code&client_id=MY_CLIENT_ID
  &redirect_uri=MY_REDIRECT_URL
  &state=SECURE_RANDOM
  &scope=wallet:accounts:read

我想我将按如下所示进行重定向：

window.location.replace(response);

但是，发生的是我得到一个HTTP 404，因为我的系统正在将UI locahost预先添加到该URL。因此，它看起来像：

http://localhost:8080/my_web_ui_app/https://www.coinbase.com/oauth/authorize?
  response_type=code&client_id=MY_CLIENT_ID
  &redirect_uri=MY_REDIRECT_URL
  &state=SECURE_RANDOM
  &scope=wallet:accounts:read

显然，当我收到HTTP 404错误时，这将无法正常工作。

还有什么我应该尝试的？就像我说的那样，我不是UI方面的好人，但我只需要可以正常使用的东西。

谢谢！

答案

这是Ajax本身。

$.ajax(
        url : 'http://localhost:8080/myapp-be/api/myrestapi/authorize',
        headers : 'token' : token,
        dataType: 'text',
        cache: false,
           success: function(response) 
               console.log(response)
               $(location).attr('href',response);
           
    );

dataType：“文本”是罪魁祸首。

URL是响应，并且作为“文本”，它在响应周围添加了另一层引号。

[一旦我从Ajax调用中删除了dataType，那么默认的dataType就会起作用，并且我不再获得带有额外引号的URL。成功后，我能够进行简单的重定向并且成功了。是一个简单的解决方法。

感谢Chrome和调试工具的出色使用，因此我看到返回的响应周围带有多余的引号。