Estou tendo esse seguinte erro: Failed to load resource: the server responded with a status of 403 ()

package br.com.alura.mvc.mudi.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/oferta")
public class OfertaController {

    @GetMapping
    public String getFormularioParaOfertas() {

        return "oferta/home";

    }

}

package br.com.alura.mvc.mudi.dto;

import java.math.BigDecimal;
import java.time.LocalDate;
import java.time.format.DateTimeFormatter;

import br.com.alura.mvc.mudi.model.Oferta;

public class RequisicaoNovaOferta {

    private static final DateTimeFormatter formatter = DateTimeFormatter.ofPattern("dd/MM/yyyy");

    private Long pedidoId;

    private String valor;

    private String dataDaEntrega;

    private String comentario;

    public Long getPedidoId() {
        return pedidoId;
    }

    public void setPedidoId(Long pedidoId) {
        this.pedidoId = pedidoId;
    }

    public String getValor() {
        return valor;
    }

    public void setValor(String valor) {
        this.valor = valor;
    }

    public String getDataDaEntrega() {
        return dataDaEntrega;
    }

    public void setDataDaEntrega(String dataDaEntrega) {
        this.dataDaEntrega = dataDaEntrega;
    }

    public String getComentario() {
        return comentario;
    }

    public void setComentario(String comentario) {
        this.comentario = comentario;
    }

    public Oferta toOferta() {
        Oferta oferta = new Oferta();
        oferta.setComentario(this.comentario);
        oferta.setDataDaEntrega(LocalDate.parse(this.dataDaEntrega, formatter));
        oferta.setValor(new BigDecimal(this.valor));
        return oferta;
    }


}

package br.com.alura.mvc.mudi.model;

import java.math.BigDecimal;
import java.time.LocalDate;

import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.ManyToOne;

@Entity
public class Oferta {

    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private BigDecimal valor;

    private LocalDate dataDaEntrega;

    private String comentario;

    @ManyToOne(fetch = FetchType.LAZY)//Para não carregar todos os dados
    private Pedido pedido;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public BigDecimal getValor() {
        return valor;
    }

    public void setValor(BigDecimal valor) {
        this.valor = valor;
    }

    public LocalDate getDataDaEntrega() {
        return dataDaEntrega;
    }

    public void setDataDaEntrega(LocalDate dataDaEntrega) {
        this.dataDaEntrega = dataDaEntrega;
    }

    public String getComentario() {
        return comentario;
    }

    public void setComentario(String comentario) {
        this.comentario = comentario;
    }

    public Pedido getPedido() {
        return pedido;
    }

    public void setPedido(Pedido pedido) {
        this.pedido = pedido;
    }


}

package br.com.alura.mvc.mudi.model;

import java.math.BigDecimal;
import java.time.LocalDate;
import java.util.List;

import javax.persistence.CascadeType;
import javax.persistence.Entity;
import javax.persistence.EnumType;
import javax.persistence.Enumerated;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;

import com.fasterxml.jackson.annotation.JsonIgnore;

@Entity
public class Pedido {

    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String nomeProduto;
    private BigDecimal valorNegociado;
    private LocalDate dataDaEntrega;
    private String urlProduto;
    private String urlImagem;
    private String descricao;

    @Enumerated(EnumType.STRING)
    private StatusPedido status;

    @ManyToOne(fetch = FetchType.LAZY)
//    @JsonIgnoreProperties(value= {"applications", "hibernateLazyInitializer"})
    @JsonIgnore
    private User user;

    @OneToMany(cascade = CascadeType.ALL, mappedBy = "pedido", fetch = FetchType.LAZY)
    private List<Oferta> ofertas;

    public String getNomeProduto() {
        return nomeProduto;
    }
    public void setNomeProduto(String nomeProduto) {
        this.nomeProduto = nomeProduto;
    }
    public BigDecimal getValorNegociado() {
        return valorNegociado;
    }
    public void setValorNegociado(BigDecimal valorNegociado) {
        this.valorNegociado = valorNegociado;
    }
    public LocalDate getDataDaEntrega() {
        return dataDaEntrega;
    }
    public void setDataDaEntrega(LocalDate dataDaEntrega) {
        this.dataDaEntrega = dataDaEntrega;
    }
    public String getUrlProduto() {
        return urlProduto;
    }
    public void setUrlProduto(String urlProduto) {
        this.urlProduto = urlProduto;
    }
    public String getUrlImagem() {
        return urlImagem;
    }
    public void setUrlImagem(String urlImagem) {
        this.urlImagem = urlImagem;
    }
    public String getDescricao() {
        return descricao;
    }
    public void setDescricao(String descricao) {
        this.descricao = descricao;
    }
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public StatusPedido getStatus() {
        return status;
    }
    public void setStatus(StatusPedido status) {
        this.status = status;
    }
    public User getUser() {
        return user;
    }
    public void setUser(User user) {
        this.user = user;
    }
    public List<Oferta> getOfertas() {
        return ofertas;
    }
    public void setOfertas(List<Oferta> ofertas) {
        this.ofertas = ofertas;
    }

}

<html>
    <head th:replace="~{base :: head}"></head>
    <body onload="onLoad()">
        <div th:replace="~{base :: logo}"></div>

        <div class="container" id="ofertas">
            <div th:replace="~{base :: titulo('Faça sua Oferta')}"></div>

            <div class="card mb-3" v-for="pedido in pedidos">

                    <div class="card-header alert-dark">{{ pedido.nomeProduto }}</div>

                <div class="card-body">
                    <div class="row">

                        <div class="col-12 col-sm-8  mb-3">


                            <div>Produto</div>
                            <!--                          Acessando a url do produto  -->
                            <div> <a v-bind:href="pedido.urlProduto">{{ pedido.nomeProduto }}</a></div>

                            <div>Descrição</div>
                            <div>
                                <textarea disabled="disabled" class="form-control" >{{pedido.descricao}}</textarea>
                            </div>

                            <div class="row mt-3">
                            <!--                                    vincula valores da classes -->
                                <div class="col-md-5">Valor: <input class="form-control" v-model="pedido.valorNegociado" /></div>
                                <div class="col-md-7">Data da entrega: <input class="form-control" v-model="pedido.dataDaEntrega" /></div>
                            </div>
                            <div class="mt-2">
                                <label>Cometário</label>
                                <textarea class="form-control" v-model=pedido.comentario ></textarea>
                            </div>

                            <button v-on:click="enviarOferta(pedido)" class="btn btn-primary mt-2">Enviar Oferta</button>


                        </div>
                        <div class="col-12 col-sm-4">
                            <div>
                                <img class="img-thumbnail" v-bind:src="pedido.urlImagem"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <script>
            //Quando a pagina for carregada
            function onLoad() {

            //vai adcionar todos os valores do form
            var app = new Vue(
            {
                    el : '#ofertas',

                    //Meus dados
                    data : {
                        pedidos : []
                    },

                    //ele é chamado automaticamente, logo depois que Vue renderiza o HTML aí ele chama 
                    // automaticamente o mounted
                    mounted () {
                        //requisição feita com o AXIOS
                        axios
                        // Consumir uma api através de sua url
                          .get('http://localhost:8080/api/pedidos/aguardando')
                          .then(response => (this.pedidos = response.data))
                    },

                    //onde vou colocar todos os métodos
                    methods: {

                        enviarOferta: function(pedido) {
                            console.log(pedido);
                            axios
                                // requisição post, vai adicionar 
                              .post('http://localhost:8080/api/ofertas', {
                                  // Valores que serão mapeados
                                  pedidoId: pedido.id,
                                  valor: pedido.valorNegociado,
                                  dataDaEntrega: pedido.dataDaEntrega,
                                  comentario: pedido.comentario

                              })

                              .then(response => console.log(response))
                        }

                    }

                });

            }
            </script>

        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    </body>
</html>

Olá, Eric!

Infelizmente eu nunca estudei Spring, então não tenho como te responder exatamente qual o erro, mas o código 403 está relacionado a autenticação e permissões. Tente verificar se não era necessário adicionar algum certificado de autenticidade ou configurar o servidor adequadamente.

Vou deixar também 3 tópicos de alunos aqui da Alura que tiveram problemas similares. Veja os tópicos e cheque se alguma das soluções resolve o seu problema.

https://cursos.alura.com.br/forum/topico-failed-to-load-resource-the-server-responded-with-a-status-of-403-223714

https://cursos.alura.com.br/forum/topico-there-was-an-unexpected-error-type-forbidden-status-403-forbidden-156814

https://cursos.alura.com.br/forum/topico-http-status-403-forbidden-127235

Espero ter ajudado!

Boa sorte em seus estudos!

Olá, Erick!

Os erros de Bad Request refletem algo de errado na requisição, então provavelmente tem algo errado com o seu código, ou url.

Se você clicar em cima de "Uncaught (in promise)" conseguirá ver mais detalhes sobre o erro.

Certo vou da uma olhadinha

Erick, Verifique a sua classe WebSecurityConfig, provavelmente está faltando encadear os seguintes métodos no objeto http: http .csrf().disable()