axios 从前端react.js访问远程API，无需任何服务器端代码

yk9xbfzb 于 2023-08-04 发布在 iOS

关注(0)|答案(1)|浏览(95)

我试图从react.js中的fetch/axios post API访问远程URL。下面是我在react中的代码-

const requestOptions = {
        method: 'POST', 
        crossDomain: true,
        mode: 'cors', // no-cors, *cors, same-origin
        credentials: 'same-origin', // include, *same-origin, omit              
        headers:{'Content-Type': 'application/x-www-form-urlencoded',
                "Access-Control-Allow-Origin": "*",
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Allow-Methods': 'GET,POST,OPTIONS,DELETE,PUT'},
        redirect: 'follow', // manual, *follow, error 
        referrerPolicy: 'no-referrer', 
        body:new URLSearchParams({
            'store_id':'storeid',
            'store_passwd':'storepass',
            'total_amount':100,
            'currency':'BDT',
            'tran_id':'NF04',
            'success_url':"https://tigrow.herokuapp.com",
            'fail_url':"https://tigrow.herokuapp.com",
            'cancel_url':"https://tigrow.herokuapp.com",
            'cus_name':"nizam",
            'cus_email':"test@test.com",
            'cus_add1':"customer address",
            'cus_add2':"customer address",
            'cus_city':"Dhaka",
            'cus_state':"Dhaka2",
            'cus_postcode':"Dhaka",
            'cus_country':"Bangladesh",
            'cus_phone':"01700000000",
            'cus_fax':"01700000000",
            'ship_name':"Sha",
            'ship_add1':"dhaka",
            'ship_add2':"dhaka1",
            'ship_city':"Dhaka1",
            'ship_state':"Dhaka2",
            'ship_postcode':"1000",
            'ship_country':"Bangladesh",
            'multi_card_name':"mastercard,visacard,amexcard",
            'value_a':"ref001_A",
            'value_b':"ref002_B",
            'value_c':"ref003_C",
            'value_d':"ref004_D",
            'shipping_method':"No",
            'product_name':"Test",
            'product_category':"Test Category",
            'product_profile':"general"
        })
    };           
    fetch(url, requestOptions)
        .then(response =>console.log(response))
        .then(data => console.log(data));

字符串
我只想从远程API中获取数据，而不是任何服务器端代码。这里我的content-type是application/x-www-form-urlencoded。我如何只用react.js解决这个问题？

axios

来源：https://stackoverflow.com/questions/72729730/access-a-remote-api-from-frontend-react-js-without-any-server-side-code

1条答案

按热度按时间

yws3nbqq1#

我的远程API严格提到了没有来自客户端代码的调用。开发人员必须需要从服务器端调用API，完成调用后，开发人员应返回字符串URL，而不是任何JSON数据。我按照这个方法，用python做了代码，得到了结果。然而我的前端是React。下面是代码片段-

def sslcommerz_payment_gateway(request):    
    gateway_auth_details = PaymentGatewaySettings.objects.all().first()
    settings = {'store_id':gateway_auth_details.store_id,
            'store_pass': gateway_auth_details.store_pass,
            'issandbox': True} #gateway_auth_details.store_pass, 'issandbox': False}     
    print(request.POST)    
    sslcommez = SSLCOMMERZ(settings)
    post_body = {}
    post_body['total_amount'] =request.POST.get('total_amount')
    post_body['currency'] = request.POST.get('currency')
    post_body['tran_id'] =unique_transaction_id_generator()
    post_body['success_url'] = 'http://127.0.0.1:8000/api/payment/success/'
    post_body['fail_url'] = 'http://127.0.0.1:8000/api/payment/faild/'
    post_body['cancel_url'] = request.POST.get('cancel_url')
    post_body['emi_option'] = 0
    post_body['cus_name'] = request.POST.get('cus_name')
    post_body['cus_email'] =request.POST.get("cus_email")
    post_body['cus_phone'] = request.POST.get("cus_phone")
    post_body['cus_add1'] = request.POST.get("cus_add1")
    post_body['cus_city'] = request.POST.get("cus_city")
    post_body['cus_state'] =request.POST.get("cus_state")
    post_body['cus_postcode'] =request.POST.get("cus_postcode")
    post_body['cus_country'] = request.POST.get("cus_country")
    post_body['shipping_method'] ="NO"#request.POST.get("shipping_method")       
    post_body['multi_card_name'] = "mastercard,visacard,amexcard,mobilebank,internetbank,othercard"
    post_body['num_of_item'] = request.POST.get("num_of_item")
    post_body['product_name'] = request.POST.get("product_name")
    post_body['product_category'] = request.POST.get("product_category")
    post_body['product_profile'] = "Art(Hard Copy/Soft Copy)"   
    response = sslcommez.createSession(post_body) 
    print(response)        
    return 'https://sandbox.sslcommerz.com/gwprocess/v4/gw.php?Q=pay&SESSIONKEY=' + response["sessionkey"]

字符串
最后我得到了API响应并返回了一个URL。

赞(0）回复(0）举报 2023-08-04

我来回答

axios 从前端react.js访问远程API，无需任何服务器端代码

1条答案

相关问题

热门标签

最新问答