[javascript] AngularJ에서 CORS를 활성화하는 방법

이 문제는 동일한 원본 정책 인 웹 응용 프로그램 보안 모델 정책으로 인해 발생합니다. 정책 에서 웹 브라우저는 첫 번째 웹 페이지에 포함 된 스크립트가 두 번째 웹 페이지의 데이터에 액세스 할 수 있지만 두 웹 페이지의 원본이 동일한 경우에만 가능합니다. 즉, 요청자는 요청 사이트의 정확한 호스트, 프로토콜 및 포트와 일치해야합니다.

이 CORS 헤더 문제를 극복하기위한 여러 옵션이 있습니다.

1. 프록시 사용 -이 솔루션에서는 프록시를 통해 요청이 프록시를 통과 할 때 동일한 출처처럼 보이도록 프록시를 실행합니다. nodeJS 를 사용하는 경우 cors -anywhere 를 사용 하여 프록시 작업을 수행 할 수 있습니다 . https://www.npmjs.com/package/cors-anywhere .

   예 :-

   var host = process.env.HOST || '0.0.0.0';
   var port = process.env.PORT || 8080;
   var cors_proxy = require('cors-anywhere');
   cors_proxy.createServer({
       originWhitelist: [], // Allow all origins
       requireHeader: ['origin', 'x-requested-with'],
       removeHeaders: ['cookie', 'cookie2']
   }).listen(port, host, function() {
       console.log('Running CORS Anywhere on ' + host + ':' + port);
   });

2. JSONP -JSONP는 도메인 간 문제에 대해 걱정하지 않고 JSON 데이터를 전송하는 방법으로, XMLHttpRequest 객체를 사용하지 않으며 <script>대신 태그를 사용합니다. https://www.w3schools.com/js/js_json_jsonp.asp

3. 서버 측 -서버 측에서 교차 출처 요청을 활성화해야합니다. 먼저 프리 플라이트 요청 (OPTIONS)을 받고 상태 코드 200 (ok) 인 요청을 허용해야합니다 .

   프리 플라이트 요청은 먼저 실제 요청이 안전하게 전송되는지 확인하기 위해 다른 도메인의 리소스로 HTTP OPTIONS 요청 헤더를 보냅니다. 사이트 간 요청은 사용자 데이터에 영향을 줄 수 있으므로 이와 같이 프리 플라이트됩니다. 특히 요청이 GET 또는 POST 이외의 메소드를 사용하는 경우 프리 플라이트됩니다. 또한 POST를 사용하여 application / x-www-form-urlencoded, multipart / form-data 또는 text / plain 이외의 Content-Type으로 요청 데이터를 보내는 경우 (예 : POST 요청이 서버에 XML 페이로드를 보내는 경우) application / xml 또는 text / xml을 사용하면 요청이 프리 플라이트됩니다. 요청에 사용자 정의 헤더를 설정합니다 (예 : 요청에 X-PINGOTHER와 같은 헤더가 사용됨)

   스프링을 사용하는 경우 벨로우즈 코드를 추가하면 문제가 해결됩니다. 여기에서 귀하의 요구 사항에 따라 활성화 / 비활성화와 관련이없는 csrf 토큰을 비활성화했습니다.

   @SpringBootApplication
   public class SupplierServicesApplication {
   
       public static void main(String[] args) {
           SpringApplication.run(SupplierServicesApplication.class, args);
       }
   
       @Bean
       public WebMvcConfigurer corsConfigurer() {
           return new WebMvcConfigurerAdapter() {
               @Override
               public void addCorsMappings(CorsRegistry registry) {
                   registry.addMapping("/**").allowedOrigins("*");
               }
           };
       }
   }

   스프링 보안을 사용하는 경우 위 코드와 함께 아래 코드를 사용하십시오.

   @Configuration
   @EnableWebSecurity
   public class SupplierSecurityConfig extends WebSecurityConfigurerAdapter {
   
       @Override
       protected void configure(HttpSecurity http) throws Exception {
           http.csrf().disable().authorizeRequests().antMatchers(HttpMethod.OPTIONS, "/**").permitAll().antMatchers("/**").authenticated().and()
                   .httpBasic();
       }
   
   }

답변

   onGetUser(){
        return this.http.get("http://localhost:3000/user").pipe(map(
            (response:Response)=>{
                const user =response.json();
                return user;
            }
        ))
    }

app.get('/user',async(req,res)=>{
     const user=await getuser();
     res.send(user);
 })

app.get('/user',async(req,res)=>{
    res.header("Access-Control-Allow-Origin", "*");
    const user=await getuser();
    res.send(user);
})

<VirtualHost *:80>
    <LocationMatch "/SomePath">
       ProxyPass http://target-ip:8080/SomePath
       Header add "Access-Control-Allow-Origin" "*"
    </LocationMatch>
</VirtualHost>