ThingWorx 跨域问题has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present...

本文介绍ThingWorx Platform平台接口如何访问,出现跨域问题如何解决。参考官方文章CS229450 - How to Enable Cross-Origin Resource Sharing (CORS) in Apache Tomcat for ThingWorx Platform/ThingWorx Navigate

背景

公司服务器部署了一台 ThingWorx Platform,现在另一个系统要调用thingworx中开放的api接口(thingworx如何写api接口可参考官网),访问时浏览器提示错误:

很明显是跨域问题 ,解决方案见下面步骤:

解决方案

1、找到thingworx安装目录下的tomcat下web.xml文件:<Apache Tomcat Install>\webapps\Thingworx\WEB-INF\ ,在 </session-config> 行后面新增

<filter>
	<filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
		<param-name>cors.allowed.origins</param-name>
		<param-value>*</param-value> 
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>OPTIONS,GET,POST,HEAD,PUT,DELETE</param-value>
    </init-param>
	<init-param>
		<param-name>cors.allowed.headers</param-name>
		<param-value>Authorization,appKey,x-thingworx-session,Content-Type,X-Requested-With,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
	</init-param>
	<init-param>
		<param-name>cors.exposed.headers</param-name>
		<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
	</init-param>
	<init-param>
		<param-name>cors.support.credentials</param-name>
		<param-value>false</param-value>
	</init-param>
	<init-param>
		<param-name>cors.preflight.maxage</param-name>
		<param-value>10</param-value>
	</init-param>
	<init-param>
		<param-name>cors.request.decorate</param-name>
		<param-value>true</param-value>
	</init-param>
</filter>

<filter-mapping>
		<filter-name>CorsFilter</filter-name>
		<url-pattern>/*</url-pattern>
</filter-mapping>

cors.allowed.origins的值可以设置为指定域访问,如有多个用英文逗号分隔,允许所有域访问设置为*,这里直接设置为*。

2、ThingWorx Platform 8.5 及更高版本开始,还需要注释掉以下与OPTIONS相关的块:

  <!-- <security-constraint>
    <web-resource-collection>
      <web-resource-name>Forbidden</web-resource-name>
      <url-pattern>/*</url-pattern>
      <http-method>HEAD</http-method>
      <http-method>OPTIONS</http-method>
    </web-resource-collection>
    <auth-constraint/>
  </security-constraint> -->

3、保存web.xml文件,重启Apache Tomcat。

完成以上步骤,thingworx已经放开 了跨域限制,只需要调用即可,可以测试下,测试html如下

<html>
  <head>
  <meta charset="utf-8"/>
	<script>
		function httpFunction()
		{
			const theUrl = "thingworx API地址";
			var xmlHttp = new XMLHttpRequest();
			xmlHttp.open( "POST", theUrl, false ); // false for synchronous request
			xmlHttp.setRequestHeader("Content-type", "application/json");
			xmlHttp.setRequestHeader("Accept","application/json");
            xmlHttp.setRequestHeader("appKey","thingworx上面申请的key");
			xmlHttp.send();
			alert(xmlHttp.responseText)
			return xmlHttp.responseText;
		}
	</script>
	<script>
	function myFunction() {
	  alert("Click me Test!");
	}
	</script>

  </head>
  <body>
	  <button onclick="httpFunction()">Click me</button> 
	  <button onclick="myFunction()">Click me Test</button> 
  </body>
</html>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值