What's the difference between “same-origin” and “no-cors” for JavaScript's Fetch API?

Question

I thought same origin implies no CORS, and vice-versa. What's the difference between the two options for JavaScript's Fetch API's mode option?

Also, in the specs, it says:

Even though the default request mode is "no-cors", standards are highly discouraged from using it for new features. It is rather unsafe.

Why is it unsafe? Source: https://fetch.spec.whatwg.org/#requests

Answer 1

With same-origin you can perform requests only to your origin, otherwise the request will result in an error.

With no-cors, you can perform requests to other origins, even if they don't set the required CORS headers, but you'll get an opaque response.

You can read more on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Request/mode and https://developer.mozilla.org/en-US/docs/Web/API/Response/type.