【API设计风格—RESTful】：番外篇：跨域问题（四）

最新推荐文章于 2023-12-19 09:33:05 发布

xu_chenyang

最新推荐文章于 2023-12-19 09:33:05 发布

阅读量5.2k

点赞数 3

分类专栏： ▶【其他】 ……【API设计风格】文章标签：跨域 ionic angularJS

本文链接：https://blog.csdn.net/u010924834/article/details/50965714

版权

本文详细介绍了在Ionic开发中遇到跨域问题的解决方法，重点讲解了设置代理服务器作为最终解决方案，以避免在响应头中手动添加Access-Control-Allow-Origin的繁琐。通过修改ionic.project文件和设置Angular Constant，以及利用Gulp自动转换地址，实现本地开发时的跨域请求。

摘要由CSDN通过智能技术生成

问题描述：

Ionic serve 在浏览器中调试时IP是：http://localhost:8100
而我的本机的服务端的IP是：http://localhost:8080
所以存在跨域访问的问题。

解决方法

【1】设置response（此处只是了解，最终解决方案在下面）

response.setHeader(“Access-Control-Allow-Origin”, “*”);

@RequestMapping(value="/course/{id}",method=RequestMethod.GET)
public @ResponseBody Course GetCourse(@PathVariable("id") String courseid,HttpServletResponse response){        
    Course course=new Course();
    course.setId(courseid);
    //course.setCode(coursecode);
    course.setCourseName("高等数学");
    response.setHeader("Access-Control-Allow-Origin", "*"); //允许哪些url可以跨域请求到本域
    return course;
}

此种解决方法缺点：这样的话，每个方法都得传入HttpServletResponse作为一个参数
改进：使用拦截器
拦截器定义

public class ResponseInterceptor implements HandlerInterceptor {
       

    public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
        Object obj) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*"); //设置允许哪些url可以跨域请求到本域，*表示所有