Angular 跨域的问题

Question:

Angular POST request been blocked by CORS policy: Response to preflight request doesn't pass access control check

需要先启动前端服务,然后在启动后台服务,才能顺利转发

https://www.jianshu.com/p/4982acbabb57

Answer:

1.  在前端解决跨域 
https://angular.cn/guide/build#proxying-to-a-backend-server

proxy.conf.json

{
    "/api": {
      "target": "http://localhost:3000",
      "secure": false,
      "pathRewrite": {
        "^/api": ""
      }
    }
  }
 this.http.get("/api").subscribe((res:any)=>{
      console.log('数据的返回',res)
    })    //该地址就是需要被代理的

2.  后端解决跨域

app.js

app.use((req, res, next) => {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS');
        next();

});


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 传统的javaee架构 下面是常见的 javaee 架构的简化版,客户端请求 apache/nginx 代理服务器...
    hxy__阅读 522评论 0 2
  • 题目1.什么是同源策略? 同源策略(Same origin Policy): 浏览器出于安全方面的考虑,只允许与本...
    FLYSASA阅读 1,746评论 0 6
  • 浏览器在请求不同域的资源时,会因为同源策略的影响请求不成功,这就是通常被提到的“跨域问题”。作为前端开发,解决跨域...
    SCQ000阅读 2,591评论 1 52
  • 本文来自于公众号链接: 彻底掌握CORS跨源资源共享 本文接上篇公众号文章:彻底理解浏览器同源策略SOP 一.概...
    赵召阅读 453评论 0 1
  • 今天由于一个同事没有按要求记录工作,之前放过这样的错误,提醒他后还是没有改过来,使得我的工作不好做,说实话并不是很...
    慕西阅读 483评论 0 3