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代碼正是在返回的信息裏設置其容許訪問的意思。