程序在JavaScript中拋出“ Access-Control-Allow-Origin”標頭？ 在Postman中工作，而不是通過瀏覽器工作

Question

解決了

從07:00開始，我一直在從事此計划。 這讓我發瘋。 我已經編寫了多個全棧Web應用程序，但沒有遇到這個問題。

基本上，我有一個html表單，允許用戶輸入數據。 只要單擊“提交”按鈕，它將把該數據發送到mongoDB中的集合。 我已經在郵遞員中對此進行了測試，並且可以正常工作。 但是，當我通過Web瀏覽器運行程序時，出現此錯誤：

XMLHttpRequest無法加載http：// localhost：8080 / articles / addArticle 。 所請求的資源上沒有“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問原始“空”。 響應的HTTP狀態碼為404。

我嘗試安裝CORS並配置端點

我嘗試進入javascript文件並更改了

這是我的JavaScript文件

alert('JS is linked to page!');

function Article(id = 1, title = "", authors="", content = "", genre = "", date = 1497484623) {
    console.log("JavaScript file loaded successfully");
    var self = this;
    self.Id = id;
    self.Title = title;
    self.Authors = authors;
    self.Content = content;
    self.Genre = genre;
    self.Date = date;
    self.Save = function() {
        var settings = {
            url: 'http://localhost:8080/articles/addArticle',
            method: 'POST',
            dataType: "json",
              beforeSend: function (xhr) {
                xhr.setRequestHeader("Accept", "application/json");
            }
        };
        var myData = {
            "Id" : self.Id,
            "Title": self.Title,
            "Authors": self.Authors,
            "Content": self.Content,
            "Genre": self.Genre,
            "Date": self.Date
        };
        settings.data = myData;

        $.ajax(settings).done(function(article) {
         var myArticle = new Article(article.Id, article.Title, article.Authors,
                article.Content, article.Genre, article.Date);
        });
    };
}



function addArticle(Article) {
    alert('addArticle Activated');
    var settings = {
        url: 'http://localhost:8080/articles/addArticle',
        method: 'POST',
        dataType: "json",
          beforeSend: function (xhr) {
                xhr.setRequestHeader("Accept", "application/json");
            }
    };
    var myData = {      
        "Title": Article.Title,     
        "Authors" : Article.Authors,
        "Content": Article.Content,
        "Genre" : Article.Genre,
        "Date": Article.Date 
    };
    settings.data = myData;

    $.ajax(settings).done(function(Article) {
        var myArticle = new Article(article.Id, article.Title, article.Authors, article.Content,
            article.Genre, article.Date);
        console.log("Article Created");
    });
}

$(document).ready(function() {


    $(document).on("submit", "#add-article", function(e) {
        e.preventDefault();
            alert('submit Activated');
        var title, authors, genre, content;
        title = $("#Title").val();
        director = $("#Authors").val();
        rating = $("#Genre").val();
        notes = $("#Content").val();
        var myArticle = new Article(0, title, authors, genre, content, 1497484623);
        alert(myArticle.Title);
        addArticle(myArticle);
        $("#add-article")[0].reset();
        $("#title").focus();

    });

});

/*function CreateSuccessRow(Article) {
    var successDataRow = `<tr id="Article-${Article.Id}"><td>${Article.Title}</td>
                <td>${Article.Authors}</td>
                <td>${Article.Genre}</td>

由於流行的需求，這是服務器端代碼：

package com.stereoscopics.app.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.stereoscopics.app.models.Article;
import com.stereoscopics.app.repo.ArticleRepo;

@RestController
@RequestMapping("/articles")
public class ArticleController {

private ArticleRepo articleRepo;

@Autowired
public ArticleController(ArticleRepo articleRepo) {
    this.articleRepo = articleRepo;
}

@RequestMapping(value = "/findall", method = RequestMethod.GET)
@ResponseBody
public List<Article> findall() {
    return articleRepo.findAll();
}

@RequestMapping(value = "/addArticle", method = RequestMethod.POST)
@ResponseBody
public Article addArticle(@RequestBody Article newArticle) {
    articleRepo.save(newArticle);
    return newArticle;
}

}

我不知道該如何解決。 請幫忙。

更新

這仍然無法正常工作。 我已經根據一些建議更新了代碼，或者做錯了或者不正確。 更改如下所示：

  @RestController
  @RequestMapping("/articles")
  public class ArticleController {

private ArticleRepo articleRepo;

@Autowired
public ArticleController(ArticleRepo articleRepo) {
    this.articleRepo = articleRepo;
}

public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
    response.addHeader("Access-Control-Allow-Origin", "*");
}

@RequestMapping(value = "/findall", method = RequestMethod.GET)
@ResponseBody
public List<Article> findall() {
    return articleRepo.findAll();
}

@RequestMapping(value = "/addArticle", method = RequestMethod.POST)
@ResponseBody
public Article addArticle(@RequestBody Article newArticle, final 
HttpServletResponse response) {
    response.addHeader("Access-Control-Allow-Origin", "*");
    articleRepo.save(newArticle);
    return newArticle;
  }
}

尚未解決

Answer 1

基本上說的是您在http://localhost:8080/articles/addArticle 。 應該添加瀏覽器可以讀取的標頭“ Access-Control-Allow-Origin”。

在制作REST API時，我遇到了類似的情況，但是沒有安裝cors（其版本與我們的生產服務器版本沖突），而是在向請求客戶端發送響應時添加了該標頭。

response.AddHeader("Access-Control-Allow-Origin", "*");

如果您使用的是asp.net，則可以將該代碼放在Global.asax以下位置：

protected void Application_BeginRequest(Object sender, EventArgs e) { 
    var context = HttpContext.Current;
    var response = context.Response; 
    response.AddHeader("Access-Control-Allow-Origin", "*"); 
}

如果您使用的是java / servlet / jsp，則它非常相似，因為您已經可以訪問HttpServletResponse response因此在代碼正文中，只需執行以下操作：

public void doPost(HttpServletRequest request,
                     HttpServletResponse response)
      throws ServletException, IOException {
    response.addHeader("Access-Control-Allow-Origin", "*");

    //other codes and stuff here...
} 

另一方面，從使用spring的代碼中，您可以執行以下操作：

@RequestMapping(value = "/addArticle", method = RequestMethod.POST)
@ResponseBody
public Article addArticle(@RequestBody Article newArticle, final HttpServletResponse response) {
    response.addHeader("Access-Control-Allow-Origin", "*");
    articleRepo.save(newArticle);
    return newArticle;
}

Answer 2

您無法將cors作為javascript解決，我的意思是問題出在您的服務器代碼上。

Cors是瀏覽器實現的一項安全功能，下面讓我告訴您它的工作原理。

當您查詢服務器時，首先它會帶有選項方法，這時服務器會發送允許的來源列表，它可以是一個或多個。 現在，如果該列表中沒有您的本地域或任何域，則瀏覽器不會發出實際請求。

要解決此問題，您將必須在服務器上配置cors過濾器，就像

package com.package.filter;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.filter.GenericFilterBean;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


 @Component
 public class SimpleCORSFilter extends GenericFilterBean {

/**
 * The Logger for this class.
 */
private final Logger logger = LoggerFactory.getLogger(this.getClass());

@Override
public void doFilter(ServletRequest req, ServletResponse resp,
                     FilterChain chain) throws IOException, ServletException {
    logger.info("> doFilter");

    HttpServletResponse response = (HttpServletResponse) resp;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type");
    //response.setHeader("Access-Control-Allow-Credentials", "true");
    chain.doFilter(req, resp);

    logger.info("< doFilter");
}

現在，如果它仍然不起作用，那么您將不得不在服務器上逐行調試它的代碼，然后在瀏覽器端可以測試option方法是否具有允許的來源列表。

Answer 3

我不小心將其標記為已解決，但顯然並非如此。

通過在Javascript URL中包含端口號，服務器拋出了一個錯誤，因為它誤認為該請求是由於它不應該來自的某個地方發出的。 當我刪除端口號時，它不知道要打哪個端口。 默認情況下，它應該達到8080，但是我遇到了另一個錯誤。

迄今為止，還沒有人解決這個問題。 我之前沒有構建過這些應用程序，而我在工作中問過的每個人似乎都認為我應該只使用Spring表單。 理想情況下，我想真正解決問題，而不僅僅是找到解決方法。

Answer 4

解決您需要先設置crossDomain CORS問題。

$.ajax({
  crossDomain:true
})

接下來，您將在withCredentials設置xhrFields 。

$.ajax({
  crossDomain:true,
  xhrFields: {
    withCredentials: true
  }
})

在您的Code中，看起來像遵循此設置配置。

let settings = {
    url: 'http://localhost:8080/articles/addArticle',
    method: 'POST',
    crossDomain:true,
    xhrFields: {
      withCredentials: true
    }
    dataType: "json",
      beforeSend: function (xhr) {
        xhr.setRequestHeader("Accept", "application/json");
    }
};