web-dev-qa-db-ja.com

CORS Angular and Spring Boot-要求はブロックされました

私には理解できない問題がある。私からhttpリクエストを送信したい

角度クライアント：

const url = 'http://localhost:8080/api';
console.log(this.http.get(url).subscribe(data => this.greeting = data));

cORSアノテーションを使用するSpringBootバックエンド：

@CrossOrigin(origins = "http://localhost:4200/", maxAge = 3600)
    @RequestMapping("/api/")
    public Map<String,Object> home() {
        Map<String,Object> model = new HashMap<String,Object>();
        model.put("id", UUID.randomUUID().toString());
        model.put("content", "Hello World");
        return model;
    }

しかし、ブロックされ、常にログインにリダイレクトされるというエラーが表示されます。

Failed to load http://localhost:8080/api: Redirect from 'http://localhost:8080/api' to 'http://localhost:8080/login' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

それを変更する方法はありますか？

これに関するヒントやヘルプに感謝します。この問題が発生している理由を理解したいと思います。

springangularspring-boot
8
Maciej Czarnota

@RequestMapping("/api/")を使用したため、RequestMappingにエラーがあります。これは_http://your_url/api//_として評価されます。このようなマッピングはコントローラーに存在しないため、CORS Originエラーが発生しています。

末尾の_/_を@RequestMapping("/api/")から削除するだけで、@RequestMapping("/api")になります。

クラスは次のようになります。

_@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class DemoController {

    @RequestMapping(value = "/api", method = RequestMethod.GET)
    public Map<String,Object> home() {
        Map<String,Object> model = new HashMap<String,Object>();
        model.put("id", UUID.randomUUID().toString());
        model.put("content", "Hello World");
        return model;
    }
}
_
9
Paresh Lomate

これはサーバー側の問題です。サーバー側でコンポーネントを実行するだけで問題が解決します。または参照 here

このコードに従ってください：

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class RequestFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        if (!(request.getMethod().equalsIgnoreCase("OPTIONS"))) {
            try {
                chain.doFilter(req, res);
            } catch(Exception e) {
                e.printStackTrace();
            }
        } else {
            System.out.println("Pre-flight");
            response.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "authorization, content-type," +
                    "access-control-request-headers,access-control-request-method,accept,Origin,authorization,x-requested-with");
            response.setStatus(HttpServletResponse.SC_OK);
        }

    }
    }
3
Abhishek Ekaanth

アプリに注釈を付けることを選択したので、@CrossOrigin各メソッドの注釈。つまり、次のことも行う必要があります。

@CrossOrigin(origins = "http://localhost:4200/", maxAge = 3600)
    @RequestMapping("/login/")
    public Map<String,Object> login() {
     /* ... */
    }

リファレンス： https://spring.io/guides/gs/rest-service-cors/#_enabling_cors

1
Randy Casburn

すべてのメソッドに@Crossoriginで注釈を付ける代わりに、以下で説明するようにweb.xmlでfilterを使用できます

以下のフィルターをweb.xmlファイルに追加します。

 <filter>
        <filter-name>cors</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>cors</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

上記のjarの依存関係を以下に示します。

<dependency>
            <groupId>com.thetransactioncompany</groupId>
            <artifactId>cors-filter</artifactId>
            <version>2.5</version>
        </dependency>

これで完了です。

0
vipin cp