skip to Main Content

my project is to create an input page for entering some text inside and send it into mysql (phpmyadmin) . I’m using spring-boot 2.1.4 and angular 7.
Thanks in advance for investigating ! love

I’m focusing in GraphController.java and trying multiple alternative with @CrossOrigin. I’m tried to call this in global but nothing …
Here is my source https://spring.io/blog/2015/06/08/cors-support-in-spring-framework
I tried all nothing too

My entity (Graph.java)

@Entity(name = "graphiques")
@Table(name ="graphiques")
@Data
@NoArgsConstructor
@AllArgsConstructor

public class Graph {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  @Column(name ="id")
  private Long id;
  @Column(name ="xml")
  private String xml;

  public Long getId() {
    return id;
  }

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

  public String getXml() {
    return xml;
  }

  public void setXml(String xml) {
    this.xml = xml;
  }

}

My GraphController.java

@RestController
@CrossOrigin
@RequestMapping("/insert")
public class GraphController {
  @Autowired
  GraphRepository graphRepository;

  @GetMapping
  @ResponseBody
  public String addGraph(@RequestParam String xml) {
    Graph graph = new Graph();
    graph.setXml(xml);
    graphRepository.save(graph);
    String ret = "Graph has been added";
    return ret;
  }

My xml-insert-form.component.ts in Angular

  insertForm: FormGroup;
  xml: string;
  submitted = false;
  graph: Graph;

  initForm() {
    this.insertForm = this.formBuilder.group({
      xml: ['', Validators.required]
    });
  }
  onSubmit() {
    const xml = this.insertForm.get('xml').value;
    const newGraph = new Graph(xml);
    this.graphService.createNewGraph(newGraph).subscribe(
      graph => {
        console.log('onSubmit OK');
      },
      error => console.log('Erreur lors de l'ajout du nouveau graph')
    );
    this.submitted = true;
  }

In mysql I got 1 database named “sogetiauditback” and a table named “graphiques” with a column “id” and “xml”. (xml is going to be the plain text from the input text)

Expect result: No 403 error and my data inside the input sended into mysql
Error message (google chrome:
polyfills.js:3251 OPTIONS http://localhost:8282/insert 403
Access to XMLHttpRequest at 'http://localhost:8282/insert' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.)

2

Answers


  1. You can configure the cors issue in client side by using the ‘Access-Control-Allow-Origin’ header

    or trying using this

    @CrossOrigin(origins = "http://localhost:4200")
    @GetMapping
    public String addGraph(@RequestParam String xml) {
       Graph graph = new Graph();
       graph.setXml(xml);
       graphRepository.save(graph);
       String ret = "Graph has been added";
       return ret;
    }
    
    Login or Signup to reply.
  2. Add a CORS config as below :

    CORSConfig.java

    @Configuration
    public class CORSConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD");
        }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search