如何在AngularJs中启用CORS

6 回答

• 1

  你没有 . 您发出请求的服务器必须实施CORS才能从您的网站访问中授予JavaScript . 您的JavaScript无法授予自己访问其他网站的权限 .

  回复于 2024-05-11T02:33:00+08:00
• 9

  我有一个类似的问题，对我来说，它归结为在 receiving end 的 response 添加以下HTTP标头：

  Access-Control-Allow-Headers: Content-Type
  Access-Control-Allow-Methods: GET, POST, OPTIONS
  Access-Control-Allow-Origin: *
  

  您可能不希望最后使用 * ，而只使用发送数据的主机的域名 . 喜欢 *.example.com

  但这只有在您可以访问服务器配置时才可行 .

  回复于 2024-05-11T02:33:00+08:00
• 170

  尝试使用资源服务来使用flickr jsonp：

  var MyApp = angular.module('MyApp', ['ng', 'ngResource']);
  
  MyApp.factory('flickrPhotos', function ($resource) {
      return $resource('http://api.flickr.com/services/feeds/photos_public.gne', { format: 'json', jsoncallback: 'JSON_CALLBACK' }, { 'load': { 'method': 'JSONP' } });
  });
  
  MyApp.directive('masonry', function ($parse) {
      return {
          restrict: 'AC',
          link: function (scope, elem, attrs) {
              elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) });
          }
      };        
  });
  
  MyApp.directive('masonryItem', function () {
      return {
          restrict: 'AC',
          link: function (scope, elem, attrs) {
              elem.imagesLoaded(function () {
                 elem.parents('.masonry').masonry('reload');
              });
          }
      };        
  });
  
  MyApp.controller('MasonryCtrl', function ($scope, flickrPhotos) {
      $scope.photos = flickrPhotos.load({ tags: 'dogs' });
  });
  

  模板：

  <div class="masonry: 240;" ng-controller="MasonryCtrl">
      <div class="masonry-item" ng-repeat="item in photos.items">
          <img ng-src="{{ item.media.m }}" />
      </div>
  </div>
  

  回复于 2024-05-11T02:33:00+08:00
• 2

  出现此问题的原因是Web应用程序安全模型策略 Same Origin Policy 在策略下，Web浏览器允许第一个Web页面中包含的脚本访问第二个Web页面中的数据，但前提是两个Web页面具有相同的源 . 这意味着请求者必须匹配请求站点的确切主机，协议和端口 .

  我们有多种选择可以解决这个CORS头问题 .

  • Using Proxy - 在此解决方案中，我们将运行一个代理，以便当请求通过代理时，它看起来就像它是同一个来源 . 如果您使用的是 nodeJS ，则可以使用 cors-anywhere 来执行代理操作 . https://www.npmjs.com/package/cors-anywhere .

  Example ： -

  var host = process.env.HOST || '0.0.0.0';
  var port = process.env.PORT || 8080;
  var cors_proxy = require('cors-anywhere');
  cors_proxy.createServer({
      originWhitelist: [], // Allow all origins
      requireHeader: ['origin', 'x-requested-with'],
      removeHeaders: ['cookie', 'cookie2']
  }).listen(port, host, function() {
      console.log('Running CORS Anywhere on ' + host + ':' + port);
  });
  

  • JSONP - JSONP是一种发送JSON数据的方法，无需担心跨域问题 . 它不使用XMLHttpRequest对象 . 它使用 <script> 标记 . https://www.w3schools.com/js/js_json_jsonp.asp

  • Server Side - 在服务器端，我们需要启用跨源请求 . 首先，我们将获得Preflighted请求（OPTIONS），我们需要允许状态代码 200 （ok）的请求 .

  预检请求首先向另一个域上的资源发送HTTP OPTIONS请求标头，以确定实际请求是否可安全发送 . 跨站点请求是这样预检的，因为它们可能对用户数据有影响 . 特别是，如果请求使用GET或POST以外的方法，则会对其进行预检 . 此外，如果POST用于发送具有除application / x-www-form-urlencoded，multipart / form-data或text / plain之外的Content-Type的请求数据，例如，如果POST请求使用application / xml或text / xml将XML有效负载发送到服务器，则该请求将被预检 . 它在请求中设置自定义标头（例如，请求使用标头，如X-PINGOTHER）

  如果你正在使用 spring 只是添加下面的代码将解决问题 . 在这里，我已根据您的要求禁用了与启用/禁用无关的csrf令牌 .

  @SpringBootApplication
  public class SupplierServicesApplication {
  
      public static void main(String[] args) {
          SpringApplication.run(SupplierServicesApplication.class, args);
      }
  
      @Bean
      public WebMvcConfigurer corsConfigurer() {
          return new WebMvcConfigurerAdapter() {
              @Override
              public void addCorsMappings(CorsRegistry registry) {
                  registry.addMapping("/**").allowedOrigins("*");
              }
          };
      }
  }
  

  如果您使用 spring 安全使用下面的代码以及上面的代码 .

  @Configuration
  @EnableWebSecurity
  public class SupplierSecurityConfig extends WebSecurityConfigurerAdapter {
  
      @Override
      protected void configure(HttpSecurity http) throws Exception {
          http.csrf().disable().authorizeRequests().antMatchers(HttpMethod.OPTIONS, "/**").permitAll().antMatchers("/**").authenticated().and()
                  .httpBasic();
      }
  
  }
  

  回复于 2024-05-11T02:33:00+08:00
• 59

  我自己回答 .

  CORS angular js + restEasy on POST

  最后我来到这个解决方法：它与IE一起工作的原因是因为IE直接发送POST而不是首先请求权限的预检请求 . 但我仍然不知道为什么过滤器无法管理OPTIONS请求并默认发送过滤器中未描述的 Headers （似乎只是覆盖了这种情况......也许是一个restEasy的东西.. . ）

  所以我在我的休息服务中创建了一个OPTIONS路径，它重写响应并使用响应头包含响应中的头

  如果有人之前面对这个，我仍然在寻找干净的方式去做 .

  回复于 2024-05-11T02:33:00+08:00
• 0

  var result=[];
          var app = angular.module('app', []);
          app.controller('myCtrl', function ($scope, $http) {
               var url="";// your request url    
               var request={};// your request parameters
               var headers = {
               // 'Authorization': 'Basic ' + btoa(username + ":" + password),
              'Access-Control-Allow-Origin': true,
              'Content-Type': 'application/json; charset=utf-8',
              "X-Requested-With": "XMLHttpRequest"
                }
               $http.post(url, request, {
                          headers
                   })
                   .then(function Success(response) {
                        result.push(response.data);             
                        $scope.Data = result;              
                   }, 
                    function Error(response) {
                        result.push(response.data);
                         $scope.Data = result;
                      console.log(response.statusText + " " + response.status)
                 }); 
       });
  
  And also add following code in your WebApiConfig file            
          var cors = new EnableCorsAttribute("*", "*", "*");
          config.EnableCors(cors);
  

  回复于 2024-05-11T02:33:00+08:00