Question

如何在客户端和服务器上使用jsonp和CORS在网页上实现跨域ajax调用。

例如，在www.mytestsite.com上，要对www.otherdestinationserver.com进行ajax调用，如何使用JSONP或CORS实现？

Answer 1

最后，我在研究完所有其他帖子后找到了一些解决方案。我正在为这两种方法写下答案。

<强> 1。仅使用JSONP而不使用CORS：

如果使用JSONP，则始终需要进行服务器端更改以使用callback方法获取json响应。此外，callback方法必须存在于javascript中才能执行。因此，在下面的示例中，当我们调用目标网址时，如果我们将响应设为myCallBackMethod({ "customerData": { "name": "testName", "age": 26 } })，那么我们必须拥有名为javascript method的{{1}}。使用jsonp，myCallBackMethod

在此方法中，无需在目标服务器的响应中设置任何标头以允许请求的域。
此示例中使用的cookies can also be shared across domains方法为callback。此名称可以是任何内容，但myCallBackMethod和javascript

client / javascript：

＆＃13;

response jsonp string must match

＆＃13;

<强> 2。仅使用CORS而不使用JSONP且不使用URL REWRITES：

如果使用CORS，则始终存在function makeTheCall(queryString) { var destinationUrl = "www.otherdestinationserver.com"; $.ajax({ type: 'GET', url: destinationUrl + queryString, dataType: 'jsonp', jsonpCallback: 'myCallBackMethod', async: false, // this is by default false, so not need to mention crossDomain: true // tell the browser to allow cross domain calls. // success: successResopnse, jsonpCallback will call the successCallback // error: failureFunction jsonp does not support errorCallback. So cannot use this }); } window.myCallBackMethod = function(data) { successResponse(data); } successResponse = function(data) { //functionality goes here; } // the json response from the server when calling the url must be in the below format only. myCallBackMethod({ "customerData": { "name": "testName", "age": 26 } })。在这种方法中，need to make changes on server and client/javascript方法作为json响应的一部分。回复no need to get any callback。但是，在目标服务器上进行适当的代码更改以允许请求通过。因此需要在must be a pure json对象中设置header。

客户端/ javascript：

＆＃13;

response

＆＃13;

在服务器上，添加以下标题。

function makeTheCall(queryString) {
    var destinationUrl = "www.otherdestinationserver.com";
    $.ajax({
      type: 'GET',
      url: destinationUrl + queryString,
      dataType: 'json', // use json only, not jsonp
      crossDomain: true, // tell browser to allow cross domain.
      success: successResopnse,
      error: failureFunction
    });
  }
  
  successResponse = function(data) {
  //functionality goes here;
  }

  failureFunction = function(data) {
  //functionality goes here;
  }

但是，将上述代码添加到服务器后，服务器和请求的页面之间不会共享任何cookie。为了在请求的页面和服务器上获取cookie，我们需要在客户端和服务器上添加以下属性。

在客户端/ javascript：

httpServletResponse.setHeader("Access-Control-Allow-Origin", "*"); // Here need to give the origin url (the url in the address bar of the page which is making request). Using * means allow any value

在服务器上：

xhrFields: {
    'withCredentials': true // tell the client to send the cookies if any for the requested domain
    }

这些更改允许客户端和服务器共享cookie。
但是，如果在回复中使用标头httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");，则标头Access-Control-Allow-Credentials的值会受到限制。它应Access-Control-Allow-Origin。因此请提供准确的域名。

服务器更新：

never be * if we want to use Access-Control-Allow-Credentials header

最终客户端/ javascript :(仅限CORS方法）

＆＃13;

httpServletResponse.setHeader("Access-Control-Allow-Origin", "www.mytestsite.com"); // Give the origin url (the url in the address bar of the page which is making request).

＆＃13;

最终服务器代码:(仅限CORS方法）

function makeTheCall(queryString) {
    var destinationUrl = www.otherdestinationserver.com;
    $.ajax({
      type: 'GET',
      url: destinationUrl + queryString,
      dataType: 'json', // use json only, not jsonp
      crossDomain: true, // tell browser to allow cross domain
      xhrFields: {
         'withCredentials': true // tell the client to send the cookies if any for the requested domain
      },
      success: successResopnse,
      error: failureFunction
    });
  }
  
  successResponse = function(data) {
  //functionality goes here;
  }

  failureFunction = function(data) {
  //functionality goes here;
  }

第3。仅使用CORS使用URL REWRITE FILTER设置响应标题：

如果应用程序使用url重写过滤器（大多数是所有Web应用程序都使用），这将使实现更容易。在上面的方法2中，不要遵循 最终服务器代码:(仅CORS方法） ，而是按照以下URL更改xml（url rewrite filter）。

How to set origin or referer value which we got from request into the response-header using urlrewritefilter

下面粘贴相同的代码以供快速参考。

httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpServletResponse.setHeader("Access-Control-Allow-Origin", "www.mytestsite.com");

Answer 2

如果您无法控制服务器端，则可以像我一样在

上解决

仅客户端。

如果可以控制服务器端，则可以使用服务器端解决方案。我在这里没有讨论。

仅在客户端，解决方法是

使用dataType：'jsonp'，

   async function get_ajax_data(){

       var _reprojected_lat_lng = await $.ajax({

                                type: 'GET',

                                dataType: 'jsonp',

                                data: {},

                                url: _reprojection_url,

                                error: function (jqXHR, textStatus, errorThrown) {

                                    console.log(jqXHR)

                                },

                                success: function (data) {

                                    console.log(data);



                                    // note: data is already json type, you just specify dataType: jsonp

                                    return data;

                                }

                            });





 } // function

使用JSONP或CORS进行跨域JavaScript调用

2 个答案: