用Vue搭建了一个前后端完全分离的DEMO项目,由于前后端的端口不一致,存在跨域问题。
解决方法是,在后台服务程序的web.xml中配置如下过滤器即可:
<filter>
<description>跨域过滤器</description>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
涉及到的JAR包有java-property-utils-1.10.jar,cors-filter-2.6.jar,(gson-2.8.1.jar这个是我用来处理JSON的,非必要)
下载路径:
cors-filter-2.6.jar-------------->http://download.youkuaiyun.com/download/u012557538/9932159
java-property-utils-1.10.jar-------------->http://download.youkuaiyun.com/download/u012557538/9932157
二:上面方法是服务端由自己搭建才可使用,若调用第三方的服务,则需要用到vue-resource中的Jsonp,
官方手册:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
使用方法很简单
1.安装:npm install vue-resource --save
2.引入:
import r from 'vue-resource' import v from 'vue'
v.use(r)
然后在需要的地方使用:
this.$http.jsonp('https://api.douban.com/v2/book/1003078').then(response => { console.log(response.body) })