Fix lỗi Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

 

Khi bạn làm việc với vuejs hay nói cách khác làm việc có gửi api hay bị lỗi như này:

 

Ở đây mình dùng vuejs gọi api đến magento.

Cách fix của mình:

  1. Thêm Header vào bên trong thẻ mở <IfModule mod_headers.c> của file .htaccess (bình thường nó nằm ngang hàng root project magento luôn, không thì ở
    /opt/bitnami/apache/conf/vhosts/htaccess/magento-htaccess.conf, tuỳ vào project của bạn cấu hình như nào nha. Của mình vào .htaccess nó hướng dẫn vào đường dẫn đó)

Header always set Access-Control-Allow-Origin “*”
Header always set Access-Control-Allow-Methods “POST, GET, OPTIONS, DELETE, PUT”
Header always set Access-Control-Max-Age “86400”
Header always set Access-Control-Allow-Headers “X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token”

Sau đó ở vuejs mình dùng axios gọi như sau:

let addToCartForm = new FormData();
addToCartForm.set('message', 'test');
axios({
    url: 'https://magento.traefik.local/rest/V1/guest-carts',
    method: 'post',
    data: addToCartForm
}).then((result) => {
//code

});

Chúng ta phải sử dụng FormData() thay vì sử dụng axios như bình thường.
Nguồn: 

https://stackoverflow.com/questions/59263382/axios-ajax-posting-data-issue

Vậy muốn gọi data là một object thì làm sao:

Sử dụng:
function buildFormData(formData, data, parentKey) {
  if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
    Object.keys(data).forEach(key => {
      buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
    });
  } else {
    const value = data == null ? '' : data;

    formData.append(parentKey, value);
  }
}

function jsonToFormData(data) {
  const formData = new FormData();

  buildFormData(formData, data);

  return formData;
}

const my_data = {
  num: 1,
  falseBool: false,
  trueBool: true,
  empty: '',
  und: undefined,
  nullable: null,
  date: new Date(),
  name: 'str',
  another_object: {
    name: 'my_name',
    value: 'whatever'
  },
  array: [
    {
      key1: {
        name: 'key1'
      }
    }
  ]
};

jsonToFormData(my_data) Nguồn: https://stackoverflow.com/questions/22783108/convert-js-object-to-form-data Okie, chúc bạn thành công. Nếu bạn dùng traefik thì thử tắt https, và chỉ dùng toàn bộ api là http xem được không. Bằng cách vào file traefik.toml rồi comment 2 dòng
#[entryPoints.http.redirect]
#entryPoint = "https"
Note: để biết lỗi api là do client gọi hay server trả về thì bạn hãy thử đổi api thành 1 api public trên mạng (chọn api public dùng được nha, thử trên postman trước).