用angular发起http.get(),访问后端web API要数据,结果chrome报错:跨域了

Access to XMLHttpRequest at 'http://127.0.0.1:3000/XXX' 
from origin 'http://127.0.0.1:4200' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

此时后端nodejs显示返回值正常。只是浏览器给拦截了。

参考https://www.cnblogs.com/relucent/p/4274158.html

什么是跨域

当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.google.com),那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同)。

跨域就指着协议,域名,端口不一致,出于安全考虑,跨域的资源之间是无法交互的

解决方法很简单,在服务器端的response里添加header,允许前端指定的主机访问

具体到express 参考 https://www.cnblogs.com/ae6623/p/4433143.html

app.route("/XXX")
  .get(jsonParser, (req, res) => {
    //do something
    const content = 'OK'
    res.set({'Access-Control-Allow-Origin': 'http://127.0.0.1:4200'})
      .send(content)
  })

注意要包括 http://,和端口号,最好把这些写在一个配置文件里,在nodejs启动时加载进来,便于在docker等容器里用的时候修改前端的IP和端口

解决跨域No 'Access-Control-Allow-Origin' header is present on the requested resource.的更多相关文章

  1. java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  2. 跨域问题解决----NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost:11000' is therfore not allowed access'

    NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost ...

  3. .Net Core 处理跨域问题Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

    网页请求报错: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Or ...

  4. WCF REST开启Cors 解决 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 405.

    现象: 编写了REST接口: [ServiceContract] public interface IService1 { [OperationContract] [WebInvoke(UriTemp ...

  5. Webapi 跨域 解决解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource 问题

    首先是web端(http://localhost:53784) 请求 api(http://localhost:81/api/)时出现错误信息: 查看控制台会发现错误:XMLHttpRequest c ...

  6. js跨域访问,No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

  7. (转)AJax跨域:No 'Access-Control-Allow-Origin' header is present on the requested resource

    在本地用ajax跨域访问请求时报错: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ori ...

  8. As.net WebAPI CORS, 开启跨源访问,解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource

    默认情况下ajax请求是有同源策略,限制了不同域请求的响应. 例子:http://localhost:23160/HtmlPage.html 请求不同源API http://localhost:228 ...

  9. 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.

    前端显示: has been blocked by CORS policy: Response to preflight request doesn't pass access control che ...

随机推荐

  1. WPF ComboBox SelectionChanged事件里赋值Text的解决方法

    string sCountry ; private void cbCountry_SelectionChanged(object sender, SelectionChangedEventArgs e ...

  2. Python脚本之安装linux源码包-Jenkins

    最近开始学Python,按照网上的教程,写了一个Python脚本下载Jenkins并运行的脚本,很简单. 首先使用vi命令编辑一个新文件auto_built_jenkins.py(关于vi的使用可以见 ...

  3. 在Windows Server 2008 R2 Server中,连接其他服务器的数据库遇到“未启用当前数据库的 SQL Server Service Broker,因此查询通知不受支持。如果希望使用通知,请为此数据库启用 Service Broker ”

    项目代码和数据库部署在不同的Windows Server 2008 R2 Server中,错误日志显示如下: "未启用当前数据库的 SQL Server Service Broker,因此查 ...

  4. 【Python】-NO.97.Note.2.Python -【Python 基本数据类型】

    1.0.0 Summary Tittle:[Python]-NO.97.Note.2.Python -[Python 基本数据类型] Style:Python Series:Python Since: ...

  5. js 执行机制

    浏览器中每个一个窗口都是一个单独的进程.这就需要分析浏览器与Javascript解释引擎之间的关系.先给出结论,浏览器本身是多线程的,Javascript解释引擎是单线程的. 先说说浏览器有哪些线程, ...

  6. MyBatis基础入门《二十》动态SQL(foreach)

    MyBatis基础入门<二十>动态SQL(foreach) 1. 迭代一个集合,通常用于in条件 2. 属性 > item > index > collection : ...

  7. 面向对象编程之OC

    面向对象概述 面向对象是一种符合人类思想习惯的编程思想.现实生活中存在各种形态不同的事物,这些事物之间存在着各种各样的联系,在程序中使用对象来映射现实中的事物,使用对象的关系来描述事物之间的联系,这种 ...

  8. python assert断言函数

    python assert断言是声明布尔值必须为真的判定,如果发生异常就说明表达式为假. 可以理解assert断言语句为raise-if-not,用来测试表示式,其返回值为假,就会触发异常. self ...

  9. 【Spark-core学习之五】 RDD宽窄依赖 & Stage

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  10. re正则匹配

    import re #'(?P<name>...)' 分组匹配print(re.search("(?P<id>[0-9]+)","abc12345 ...