ajax，post，get跨域請求報Access-Control-Allow-Origin 錯誤解決辦法

背景瞭解：最近在做一個自動化校驗的系統，這也是我第一次遇到頁面和接口分開的項目，前端是用node.js跑的，後端是用tomcat，以下面登錄功能爲例，頁面訪問後端登錄接口時，瀏覽器報以下錯誤。

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource意思就是：

“已被CORS策略阻止：請求的資源上不存在“Access-Control-Allow-Origin”標頭”

原因：出於對用戶信息的保護，也保證我們請求不產生混亂，瀏覽器的同源策略要求我們只能訪問同源的資源，我頁面服務器的端口是8888，tomcat的端口是8080，不同同源所以訪問失敗。

                                        圖片來源：http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

 

解決辦法：網上的解決辦法很多，我測試了下面兩種簡單的辦法，親測可用。

我的前端是vue.js+element,後端是java的ssm框架

方法一：既然說了“”請求的資源上不存在“Access-Control-Allow-Origin”標頭””，name我就在controller文件對應的方法裏給他添加一個標頭就好了

    /**
     * 查詢當前登錄用戶的信息
     *     DSY
     */
    @RequestMapping(value = "/login", method = RequestMethod.GET)
    @ResponseBody
    public User login(HttpServletResponse response, @RequestParam(value="username")String username,@RequestParam(value="password")String password) {
        response.setHeader("Access-Control-Allow-Origin", "*");
    	return loginService.getUser(username, password);
    }

方法二：注意 ！！！如果你用的也是spring框架，並且版本在4.2以上，可以用@CrossOrigin這個註解，括號中的url可以換成“”*“”，如果這個controller裏有多個方法，註解可以直接寫在類的最上邊。

寫在方法上

    /**
     * 查詢當前登錄用戶的信息
     *	DSY
     */
    //寫在方法上
    @CrossOrigin(origins = "http://localhost:8080/") // 實現跨域  要求spring的版本必須4.2以上
    @RequestMapping(value = "/login", method = RequestMethod.GET)
    @ResponseBody
    public User login(HttpServletResponse response, @RequestParam(value="username")String username,@RequestParam(value="password")String password) {
    	return loginService.getUser(username, password);
    }

寫在類上

/**
 * 登錄相關
 *	DSY
 */
//寫在類上，不用每個方法都寫這個註解了
@CrossOrigin(origins="*",maxAge=3600)
@RestController
public class LoginController {

}

結語：解決辦法還有很多，大家可以去嘗試嘗試，以後我遇到新的解決辦法也會在博客裏更新的。