用户登录

在客户端应用请求服务端应用接口的时候,在控制台上你可能会看到这样的错误提示,说请求被 CORS 策略阻止了。这个 CORS 指的是跨域资源共享。

现在我们的这个客户端应用的地址跟它请求的服务端应用的接口不属于同一个域,虽然都是 localhost ,但是它们用的端口不一样,所以也不属于同一个域。

这种情况如果客户端想要请求使用服务端接口上的资源,服务端在做出响应的时候要在响应的头部里添加一个 Access-Control-Allow-Origin ,这个头部的值就是服务端允许访问的域。

下面我们去解决一下这个跨域的问题,在终端,服务端应用项目所在的目录的下面,给项目安装一个叫 cors 的包。完成以后用编辑器打开这个服务端项目,再去做点修改。

打开 src/app/index.ts,在这个文件的顶部导入刚才安装的 cors ,来自 cors 这个包。 然后在创建了应用的下面,可以配置一下跨域资源共享。

用一下 app.use 这个方法,把执行 cors 的结果交给这个 use 方法。 这样服务端应用在做出响应的时候就会添加 Access-Control-Allow-Origin 这个头部,如果没有具体设置这个头部的值,意思就是允许所有的域都可以请求访问服务端的资源。 保存一下文件,应用会自动重启。

再回到这个前端应用,刷新一下页面,这次在应用里请求服务端接口的时候就正常的得到了响应数据。 这里我们可以给这个 cors 添加一个配置对象参数。在里面可以添加一个 origin 属性设置一下允许的域,如果允许所有的域可以用一个 * 号表示。

另外这里还可以再添加一个 exposedHeaders,设置一下允许使用的自定义的头部,在应用里我们用了一个 X-Total-Count ,它的值是内容列表项目的总共的数量。

再到浏览器上试一下,应用仍然可以顺利的请求服务端接口获取到需要的数据。

解决服务端跨域资源共享问题(CORS)《 Vue.js 前端应用 #9:请求接口 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点