MacOS의 Safari에서 CORS 제한을 비활성화하는 설정이있어 개발 중에 유용했습니다.

개요

Safari의 개발 메뉴에 크로스 오리진 제한 사용 안 함 설정이 있어서 편리했습니다.

원래 크로스 오리진, CORS (Cross-Origin Resource Sharing) 란 무엇입니까? 라는 분은 아래 기사 당을 참고하십시오.

오리진 간 리소스 공유(CORS)
htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 그럼 / cs / u b / Ht tP / Ht tP_

CORS (Cross-Origin Resource Sharing)란?
htps : // 아에리나 01. 기주 b. 이오/bぉg/2016-10-13-1

CORS 관련, 이것만 알면 괜찮아
htps : // 코 m / 로오오오오마니 아 / ms / 4d0f6275372f413765

CORS 정리
htps : // 이 m / 토모 유키 bs / ms / 81698 et d5812 f6 a cb34

이용방법

CORS 한도 확인

설정하기 전에 CORS 제한이 적용되는지 확인합니다.
이전에 구현한 간단한 API와 웹 서버를 활용합니다.

파이썬 표준 라이브러리로 API 서버와 웹 서버를 시작합니다.
htps : // 코 m / 카이 _ 코 / MS / 6cf5930330b85 583b0

GitHub에 소스를 올리고 있기 때문에, 좋으면 참조하십시오.
htps : // 기주 b. 코 m / 카이 코 / 시 mp ぇ _ ap _ an d _ u b b せ r ゔ r _py

API 구현에서 Access-Control-Allow-Origin 스펙을 주석 처리합니다.

app.py

from wsgiref.simple_server import make_server

import json


def app(environ, start_response):
  status = '200 OK'
  headers = [
    ('Content-type', 'application/json; charset=utf-8'),
    # ('Access-Control-Allow-Origin', '*'),
  ]
  start_response(status, headers)

  return [json.dumps({'message':'hoge'}).encode("utf-8")]

with make_server('', 3000, app) as httpd:
  print("Serving on port 3000...")
  httpd.serve_forever()

각각 별도의 콘솔에서 API와 웹 서버를 시작합니다.

> python app.py

> python -m http.server 8080

Safari로 액세스 해보십시오.



네.Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin. 가 되어, 제한이 걸려 있는 것을 확인할 수 있었습니다.

Safari 설정 방법

Safari를 시작하고 메뉴에서 Safari → 환경 설정을 선택합니다.



상세 대화 상자가 열리면 세부 정보 탭을 열고 메뉴 표시 줄에 "개발"메뉴 표시를 선택하여 대화 상자를 닫습니다.



Safari의 메뉴에서 [개발]이 늘어나므로 거기에서 [크로스 오리진 제한 사용 안 함] 항목을 선택합니다.



다시 Safari에서 액세스하고 있습니다.



네.
CORS 제한이 벗어났음을 확인했습니다.

요약

[개발] 메뉴에 있는 대로, 어디까지나 개발시에 이용하는 설정입니다.
잘못해도 운용으로 이용하려고 생각하지 말자 ^^

Google 크롬의 경우 확장 프로그램이나 앱에 매개변수를 지정하여 제한을 무효화할 수 있는 것 같습니다.

Access-Control-Allow-Origin 오류를 방지하고 웹 서비스를 호출하는 방법? (개발시의 간편한 Tips.)
htps : // 우ぇ b.ぅs 어서. 네 t/2018/03/아아 w-안 t로 l-아아 w-오리긴-pぅg-인/

참고

오리진 간 리소스 공유(CORS)
htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 그럼 / cs / u b / Ht tP / Ht tP_

CORS (Cross-Origin Resource Sharing)란?
htps : // 아에리나 01. 기주 b. 이오/bぉg/2016-10-13-1

CORS 관련, 이것만 알면 괜찮아
htps : // 코 m / 로오 오오 니마 / ms / 4d0f6275372f413765

CORS 정리
htps : // 이 m / 토모 유키 bs / ms / 81698 et d5812 f6 a cb34

Access-Control-Allow-Origin 오류를 방지하고 웹 서비스를 호출하는 방법? (개발시의 간편한 Tips.)
htps : // 우ぇ b.ぅs 어서. 네 t/2018/03/아아 w-안 t로 l-아아 w-오리긴-pぅg-인/