소개

외부 서버와 Ajax 통신하려는 경우를 확인합니다.

Access-Control-Allow-Origin이란?

일반적으로 다른 도메인에 대한 Ajax 통신은 할 수 없지만 서버 측에서 응답 헤더에 Access-Control-Allow-Origin을 붙임으로써 자신의 서버에 대한 액세스를 허용한다는 것.


품목
설명


Access-Control-Allow-Origin
「*」를 설정하면 모든 사이트로부터의 자원에의 액세스를 허가해 버리기 때문에, 특정의 사이트로부터의 액세스만 허가한다고 하는 설정으로 하는 것이 좋다.

Access-Control-Allow-Methods
어느 메소드를 허가하는지 설정. GET, PUT, DELETE 등을 지정.

코드

응답 헤더에 "Access-Control-Allow-Origin"을 설정합니다.
이번에는 「*」를 지정.

서블릿

@WebServlet(name = "CrossServlet", urlPatterns = {"/CrossServlet"})
public class CrossServlet extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");

        String name = request.getParameter("name");

        response.setHeader("Access-Control-Allow-Origin", "*");

        try (PrintWriter out = response.getWriter()) {
            out.println(name + "さんこんにちは！");
        }
    }
}

화면은 JavaScript를 호출하는 버튼만.

html

<ons-page>
    <ons-toolbar>
        <div class="center">AjaxJSON</div>
    </ons-toolbar>

    <div style="text-align: center">
        <ons-button onclick="crossAjax()">
            Cross Ajax
        </ons-button>

        <div id="ajax"></div>
    </div>
</ons-page>

외부 서버에 POST로 요청을 보냅니다.
데이터에는 name이라는 파라미터에 Mary를 설정.
성공하면 데이터를 받고 화면에 표시.

js

function crossAjax(){
    $.ajax({
        type: "POST",
        url: "http://examplea.com:/AllowAccessCross/CrossServlet",
        data: "name=Mary",
        success: function(data){
            $("#ajax").append("<div>" + data + "</div>");
        }
    });
}

실행 결과

Monaca는 https에 대해 내가 서있는 서버는 http로 액세스하기 때문에 안전하지 않은 스크립트를 읽으려고 노력하고 있습니다. 그리고 안전하지 않은 스크립트를로드를 누르십시오.


클라이언트측에서 보낸 name 파라미터의 값을 바탕으로 서버측에서 데이터를 취득해 화면에 표시.

요약

서버측이 크로스 오리진 제약을 받고 있는 것은 아니기 때문에, 서버측에서 허가하면 좋다고 하는 느낌입니다.
보안적인 것은 고려에 넣어야 합니다만.

참고

HTTP 액세스 제어(CORS)