本文介绍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>