vue + vue-resource 跨域訪問

使用vue + vue-resource進行數據提交，后台使用RESTful API的方式存取數據，搞了一天，終於把后台搞好了。進行聯合調試時，數據不能提交，報403錯誤：

XMLHttpRequest cannot load http://localhost:8090/xxx/xxx. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403.

當時就懵逼了，愣了半天，突然腦子里靈光一閃，這**的不會是沒有權限進行跨域訪問的錯誤吧？然后就趕緊上網查找解決方案，有前端解決方案 和 后端解決放案兩種：

前端解決方案是在 build/webpack.dev.conf.js 文件中加個代理，但好像要把訪問的API一一映射，工作量有點大，遂沒有使用這種方式。這種方式沒試過，不知可不可行。

后端方案為在后台站點中加入允許指定的站點訪問的信息：

/**
 * 解決前端站點(主要為JavaScript發起的Ajax請求)訪問的跨域問題
 */
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {  
  
    @Override  
    public void addCorsMappings(CorsRegistry registry) {  
        
        registry.addMapping("/**")  
                .allowedOrigins("*")    //允許所有前端站點調用
                .allowCredentials(true)  
                .allowedMethods("GET", "POST", "DELETE", "PUT")  
                .maxAge(1728000);  
    }  
}

原來發起Ajax跨域請求后，事先會對目標站點進行一次詢問，是否允許訪問，允許后，才會發起真實的請求（參考：構建public APIs與CORS，HTTP訪問控制(CORS) ），上述java代碼正是在返回的信息里設置其允許訪問的意思。