鍍金池/ 問答/Java  HTML/ 解決了 一半的跨源/跨域 問題

解決了 一半的跨源/跨域 問題

跨源/跨域問題,解決了一半 ?

  • 我的開發(fā)環(huán)境:
    使用VS Code開發(fā)前端代碼,前端使用了Angular6
    后端是SpringBoot + Mybatis 的Java項目
    前后端都我一個人在一臺電腦上開發(fā)的
  • 前端的Angular代碼中使用HttpClient發(fā)送請求獲取數(shù)據(jù),新增的請求是:

    var requestUrl = 'http://localhost:8085/femis/unitInsertSimple/'+ unit;
    this.http
        .get(requestUrl)
        .subscribe(data=>this.searchData());//searchData()是獲取全部數(shù)據(jù)的方法

    后面拼接的unit是string類型,Java端接受該請求的Controller中的代碼是:

        @GetMapping("/unitInsertSimple/{unit}")
        public String insert(@PathVariable("unit") String unit) {
            return service.insert(unit);
        }

    該Controller類的頭上使用了注解:@CrossOrigin,和注解@RestController
    上面的新增請求測試通過的,成功向DB中添加了一筆數(shù)據(jù)

  • 下面說說有問題的請求 - 修改請求 :
    Angular中的修改請求是:

    var requestUrl = 'http://localhost:8085/femis/unitUpdateByPrimaryKey/' + model;
    this.http.get(requestUrl).subscribe(data=>this.searchData());

    url中后面拼接的model是模型對象,其代碼是:

    export class Unit {
      constructor(
        public sId:string    
      ){}
    }

    Java端處理該請求的方法是:

        @GetMapping("/unitUpdateByPrimaryKey/{unit}")
        public String updateByPrimaryKey(@PathVariable("unit") Unit unit) {
            return service.updateByPrimaryKey(unit);
        }

    上面 的Java代碼中的Unit是模型類,執(zhí)行修改請求在瀏覽器中報錯如下:

    已攔截跨源請求:同源策略禁止讀取位于 http://localhost:8085/femis/unitUpdateByPrimaryKey/[object%20Object] 的遠(yuǎn)程資源。(原因:CORS 頭缺少 'Access-Control-Allow-Origin')。
    
  • 我的疑惑:
    上面說的新增請求和修改請求是在一個ts文件 中,新增請求可以正常執(zhí)行,怎么到了 修改請求就報跨源錯誤了??
    難道和請求后面拼接的參數(shù)有關(guān)?(新增請求后面拼接的 是string類型,修改請求后面拼接的是對象)
  • 希望得到的幫助:

    1. 解決上面的修改請求中出現(xiàn)的跨源錯誤
    2. get請求中url后面拼接對象是像我上面的 代碼一樣直接跟著對象變量就好了?正確的格式應(yīng)該是什么樣子的
    3. 如果get請求中不適合傳送對象,那么應(yīng)該采用post方法?如果是那么 post方法傳遞對象我應(yīng)該 怎么寫?
      原諒我是WEB開發(fā)的小白。
  • 有必要的話:
    我 的 聯(lián)系方式:409223171@qq.com 前面 的 數(shù)字就是我的QQ號,加我的話請注明 :跨源,怕自己忽略掉,一定要 加 注明哦。
回答
編輯回答
舊城人

angular2以后就沒有用過了,下面的說明可以參考一下:

1:解決上面的修改請求中出現(xiàn)的跨源錯誤:我使用的是springboot 2.*添加了一個跨域配置,如果使用HTTP.OPTION請求返回200說明配置成功了

@Configuration
public class AppConfiguration {
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(false);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

2和3. 太復(fù)雜的還是用post或者遵循rest,如果一定要用get發(fā)送一個對象,需要用JSON轉(zhuǎn)化成字符串,但是真的不夠優(yōu)雅。

2018年8月7日 16:18
編輯回答
柒喵

其實是問題鉆了牛角尖了,不一定非要請求路徑中追加對象,使用表單來提交就好了。本貼到此為止吧,要看angular6+antd+java+springmvc如何提交表單數(shù)據(jù)并自動封裝為bean請看:
https://segmentfault.com/q/10...

2017年12月19日 00:03