duanqin4238 2014-11-27 15:17
浏览 429
已采纳

发送ajax POST请求到restful api

I create an php slim framework based API by tutorial an now i'm able to register,login user with autentification:

URL     /register
Method  POST
Params  name, email, password

/register call dont need autentification so I write ajax to test API:

<button id="createPin"></button>
<script>
$(function() { 
    $('#createPin').click(function(e) { 
        e.preventDefault();


        var dataTest = { "name": "test", "email": "pepe@peperoni.com", "password": "sarasa" }
var urlAjax = "http://www.agroagro.com/test/v1/register";

$.ajax({
type: "POST",
url: urlAjax,
contentType: "application/json",
data: dataTest ,
success: function(data) { alert("ajax worked"); },
error: function(data) {console.log(data); },
dataType: 'json',
beforeSend: function (xhr) {
            xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        },
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
});


}); 
});
</script>

I try to run this ajax call from localhost to agroagro.com/test/v1/register but I get:

XMLHttpRequest cannot load http://www.agroagro.com/test/v1/register. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.

Is there any solution to make cross-domain ajax request becouse I have a plan to use this code as frontend of an mobile app, so I need to make requests via ajax cross-domain...

(restApi was created by following this tutorial:http://www.androidhive.info/2014/01/how-to-create-rest-api-for-android-app-using-php-slim-and-mysql-day-23/)

  • 写回答

1条回答 默认 最新

  • doumo0206 2014-11-27 16:09
    关注

    You need to set the correct header responses.

    In my case, I have a set of default header that I always set when I receive a call to my api controller. This is set in my _construct

    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    header("Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization");
    

    There are some really helpful guide that will help you understand how CORS works and why you need it.

    Cross-origin resource sharing

    Cross-domain Ajax with Cross-Origin Resource Sharing

    EDIT:

    First you need to allow access to all origins by using Access-Control-Allow-Origin : *, you are doing this now so you will see a different error from the original one posted. I had a similar issue when using phoneGap and Ionic and it was solved by added the content-type header to my ajax call. This post helped me XMLHttpRequest cannot load.

    I am using Codeigniter for my API so I don't know how much of this will help but it's very generic so should point you in the right direction.

    I have a controller called API which is used to fetch data from a database and return JSON.

    class Api extends CI_Controller {
        ....
        ....
    }
    

    In this class I have a __construct function. A __construct is always run when the class in called so you don't need to call it yourself. Within the __construct set the headers CORS headers.

    public function __construct()
    {
        parent::__construct();
    
        // Set access header
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
        header("Access-Control-Allow-Headers: Origin, HTTP_X_REQUESTED_WITH, Content-Type, Accept, Authorization");
    
        ....
        ....
    }
    

    I hope this helps

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 maya的mel里,怎样先选择模型A,然后利用mel脚本自动选择有相同名字的模型B呢。
  • ¥15 Python题,根本不会啊
  • ¥15 Python题,不会啦
  • ¥15 LD衰减结果文件dist的单位?
  • ¥15 Python题,回答一下下啦
  • ¥15 会会信号与系统和python的来
  • ¥15 关于#python#的问题
  • ¥20 oracle RAC 怎么配置啊,配置
  • ¥15 excel 日常使用中出现问题
  • ¥20 pdusession建立失败