前端怎么用nginx解决跨域问题？

Question

项目是用jq和bootstrap做的,
我自己开了个本地服务器，页面跑的地址是http://localhost:8080,
然后开发的时候我前端发起请求的API接口地址是http://localhost:8000
但是后台的地址时192.168.1.134：9111，请问要怎么配置呢？这样配置还是报错（chrome浏览器打开network面板，接口有返回200，但是没有数据，但是控制台错误：提示跨域了，提示：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.）：

        listen 8000;
        server_name localhost;
        location /{
            proxy_pass http://192.168.1.134:9111/;  
                    
        }
    }

Answer 1

配置好像没什么问题，看看nginx日志吧

Answer 2

试一下：

//config/index.js:
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://192.168.1.134:9111/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },
    ……

Answer 3

你需要看看哪些接口要处理跨域，页面本身不需要跨域

比如说你的接口都包含api，

http://1.1.1.1/api/getlist

http://1.1.1.1/api/login

像这种就需要匹配api，让所有包含api的请求转发到你需要的服务器当中

server {
       listen       443;
       server_name  blog.codelabo.cn;
       ssl_session_timeout  5m;
       ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
       ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
       ssl_prefer_server_ciphers  on;
       location / {
           root   /usr/local/src/web-app/www/blog;
           index  index.html index.htm;
           try_files $uri /index.html;
           expires 1d;
       }
       location /api {
            proxy_pass http://localhost:8888;
        }
    }

如果你的接口毫无规律，那么你只能换成这一种匹配规则了

location ~ ^/(GetRootContents|GetAssociatedFolderContents|GetRetrieveContent|GetFolderContents|GetItemData|getPlayURL|GetChannels|GetPrograms|SearchAction|GetComments|GetChaUserCommentnnels|Login|LoginOut|BindCard|Register|ModUserInfo|GetSearchHotKeywords|GetBookmarks) {
            proxy_pass http://120.77.8.170:8080;
        }

希望对你有用，谢谢

Answer 4

https://segmentfault.com/a/11...，可以参考一下

Answer 5

这个配置没问题，问一下后台是不是对请求做了额外限制，先用postman测一下这个接口本身是不是没问题