How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?

Question

I am working on an app using Vue js. According to my setting I need to pass to a variable to my URL when setting change.

Answer 1

Thanks all, I solved by this extension on chrome.

Allow CORS: Access-Control-Allow-Origin

Answer 2

To add the CORS authorization to the header using Apache, simply add the following line inside either the <Directory>, <Location>, <Files> or <VirtualHost> sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess file:

Header set Access-Control-Allow-Origin "*"

And then restart apache.

Altering headers requires the use of mod_headers. Mod_headers is enabled by default in Apache, however, you may want to ensure it's enabled.

Answer 3

Or like this :

npm install cors

cors = require("cors");
app.use(cors());

Answer 4

I had the same problem in my Vue.js and SpringBoot projects. If somebody work with spring you can add this code:

@Bean
public FilterRegistrationBean simpleCorsFilter() {  
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
    CorsConfiguration config = new CorsConfiguration();  
    config.setAllowCredentials(true); 
    // *** URL below needs to match the Vue client URL and port ***
    config.setAllowedOrigins(Collections.singletonList("http://localhost:8080")); 
    config.setAllowedMethods(Collections.singletonList("*"));  
    config.setAllowedHeaders(Collections.singletonList("*"));  
    source.registerCorsConfiguration("/**", config);  
    FilterRegistrationBean bean = new FilterRegistrationBean<>(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);  
    return bean;  
}   

I found solution in this article Build a Simple CRUD App with Spring Boot and Vue.js

Answer 5

install:

npm i cors

Then include cors():

app.get("/list",cors(),(req,res) =>{

});

Answer 6

If you have control over your server, you can use PHP:

<?PHP
header('Access-Control-Allow-Origin: *');
?>