用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. 数据库的相关语句(where,order by)

    select * from EMP t-- t列的别名--返回所有列 select ename || sal as HEHE from emp;--列的合并(使用连接) select concat(e ...

  2. vue computed的执行问题

    1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能 function Vue (options) { if (process ...

  3. python ssh之paramiko模块使用

    1.安装: sudo pip install paramiko 2.连接到linux服务器 方法一: #paramiko.util.log_to_file('ssh.log') #写日志文件 clie ...

  4. AngularJS实现可伸缩的页面切换

    AngularJS实现可伸缩的页面切换 AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易.只需要使用一个ng-view,让我 ...

  5. npm笔记

    #执行npm start时是运行的哪个js文件? 打开package.json看看scripts属性中start配置的是什么运行脚本,这里配置的就是你执行npm start时跑的脚本 #设置npm的源 ...

  6. Django之中间件&信号&缓存&form上传

    中间件 1.中间件是什么? 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用, ...

  7. Qt自定义界面

    https://blog.csdn.net/zhangxiaoyu_sy/article/details/78925221

  8. 1、js比较日期的大小

    ① html <div class="ptb10"><span>共享开始时间:</span><input type="text& ...

  9. Java+Selenium环境搭建

    初学者---简单的selenium环境搭建: 1. 安装JAVA环境 2.下载eclipse 3.下载firefox (不要最高版本,容易出现selenium不兼容问题) 4. 下载selenium需 ...

  10. python基础(3)-pycharm安装&for循环&format字符串&list列表&set集合使用

    安装IDE(PyCharm)&破解 点击下载安装包,安装. 点击下载破解补丁. 进入pycharm安装bin目录,将破解补丁copy到当前目录. 在bin目录下找到pycharm.exe.vm ...