用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. 关于springMVC的日志管理

    主要是基于在spring aop特性. 1. 创建一个系统日志的操作类,类里面提供一个方法,可以向数据库或者表中写入:访问用户名,访问IP,操作时间,访问包名,具体函数名. /** * @Name S ...

  2. 17.2-uC/OS-III消息管理(任务消息队列)

    1.任务的消息队列 uC/OS-III在任务中内建了一个消息队列.用户可以直接发送消息给任务而不通过外部消息队列. 这个特性不仅简化了代码, 还提供了效率.每个任务都内建一个消息队列. uC/OS-I ...

  3. spring datasource 使用 proxool

    XmlWebApplicationContext使用的xml配置如下: <?xml version="1.0" encoding="UTF-8"?> ...

  4. 新项目增加gradlew

    新项目,增加gradlew git clone http://git.inspur.com/iop/gradle.git git submodule update --init

  5. cocos2d-js:游戏进入后台和返回游戏的事件捕获和处理

    cocos2d-js 3.x处理 游戏置入后台和返回游戏的事件处理很方便 只需通过事件管理类cc.eventManager,自定义一个监听事件即可 代码如下 cc.eventManager.addCu ...

  6. Python学习之数组类型一:

    Python学习之数组类型一: Numpy中的向量与矩阵: 1.创建:  向量.矩阵均由array函数创建,区别在于向量是v=array( [逗号分隔的元素] ), 矩阵是M=array( [[ ]] ...

  7. word之常用功能

    0.word区域:标题栏.快速访问工具栏.功能区.功能按钮.导航窗口.编辑区.水平垂直滑动条.状态栏 1.更改office主题.文件---帐户---office主题.(传统白色.浅灰色.深灰色) 2. ...

  8. VXLAN

    网络协议栈 应用层:Telnet FTP HTTP SMTP... 传输层:TCP UDP 网络层:IP ICMP 物理链路层:ARP 以太网头(源目的MAC) | IP头(源目的IP) | TCP头 ...

  9. Spring整合MyBatis(简单登录Demo)

    SpringMvc简单整合(登录模块) 1.1 整合思路 1.SqlSessionFactory对象应该放到spring容器中作为单例存在. 2.传统dao的开发方式中,应该从spring容器中获得s ...

  10. ARM-ili9325屏调试1--时序

    2011-06-21 22:04:54 LCD连接好了,读id,不成功.说明配置引脚或读写时序不对. 原来是软件引脚配置出错. 应该用如下. #define LCD_CS   {3<<30 ...