CORS飞行前选项请求出现403错误。怎么修? [英] 403 error for CORS preflight OPTIONS request. How to fix?
问题描述
我的项目是创建一个用于在其中输入一些文本的输入页面,并将其发送到mysql(phpmyadmin)中。我正在使用spring-boot 2.1.4和angular7。
预先感谢您的调查!爱
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
我专注于GraphController.java,并尝试使用 @CrossOrigin
进行多种选择。我试图在全球范围内称呼它,但什么也没有...
这是我的来源 https://spring.io/blog/2015/06/08/cors-support-in-spring-framework
我也什么都没尝试
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
我的实体(Graph.java)
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;
}
}
我的GraphController.java
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;
}
我在Angular中的xml-insert-form.component.ts
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;
}
在mysql中,我有1个名为 sogetiauditback的数据库和一个名为 graphiques的表,其中包含 id和 xml列。 (xml将是输入文本中的纯文本)
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)
预期结果:无403错误,我输入的数据已发送到mysql
错误消息(谷歌浏览器:
- polyfills.js:3251选项http:// localhost:8282 /插入403
-已通过CORS策略阻止从来源 http:// localhost:4200访问 http:// localhost:8282 / insert处的XMLHttpRequest:对预检请求的响应未通过访问控制检查:否访问 -Control-Allow-Origin'标头出现在请求的资源上。
)
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.
)
推荐答案
添加一个CORS的配置如下:
Add a CORS config as below :
@Configuration
public class CORSConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD");
}
}
这篇关于CORS飞行前选项请求出现403错误。怎么修?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!